Dynamically add/activate options in a dropdown box

[Kamva]

Hi devs,

I want to dynamically add or active options in a dropdown field a pacticular value part of the selection in dropdown in a multi-selection field. In attempting to attain this requirement, I have tried a business rule and a client script. I am not winning with both. Below is my client script configuration in trying to attain the requirement.

Multi-selection field:

When Container Platform is part of the selection in this field, I want to add or activate options on the dropdown box.

 Client script configurations:

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue === '') {
        return;
    }

    // Check if "Container Platform" is selected in the multi-selector field
    var selectedValues = g_form.getValue('busine_service').split(',');
    if (selectedValues.indexOf('Container Platform') !== -1) {
        
        // Activate "Infrastructure" and "Application" options in the category dropdown
        activateCategoryOptions(['Infrastructure', 'Application']);
    }
}

// Function to activate specific category options in the dropdown
function activateCategoryOptions(categoriesToActivate) {
    var categoryField = g_form.getControl('category');
    var options = categoryField.options;

    // Iterate through dropdown options and activate the specified ones
    for (var i = 0; i < options.length; i++) {
        var optionValue = options[i].value;
        
        if (categoriesToActivate.indexOf(optionValue) !== -1) {
            options[i].disabled = false;
            options[i].style.display = '';
        } else {
            // Optionally, disable or hide other options
            options[i].disabled = true;
            options[i].style.display = 'none';
        }
    }
}

I am happy to answer any questions.

Thanks in advance,

Kamva

[Ravi Gaurav]

function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue === '') {
return;
}

// Check if "Container Platform" is selected in the multi-selector field
var selectedValues = g_form.getValue('busine_service').split(',');

if (selectedValues.indexOf('Container Platform') !== -1) {
// Activate "Infrastructure" and "Application" options in the category dropdown
activateCategoryOptions(['Infrastructure', 'Application']);
} else {
// If "Container Platform" is not selected, reset the dropdown to its original state
resetCategoryOptions();
}
}

// Function to activate specific category options in the dropdown
function activateCategoryOptions(categoriesToActivate) {
var categoryField = g_form.getControl('category');
var options = categoryField.options;

// Iterate through dropdown options and activate or disable them
for (var i = 0; i < options.length; i++) {
var optionValue = options[i].value;

if (categoriesToActivate.indexOf(optionValue) !== -1) {
// Enable the specific options
options[i].disabled = false;
options[i].style.display = '';
} else {
// Optionally, disable or hide other options
options[i].disabled = true;
options[i].style.display = 'none';
}
}
}

// Function to reset the dropdown to its original state
function resetCategoryOptions() {
var categoryField = g_form.getControl('category');
var options = categoryField.options;

// Iterate through dropdown options and reset their state
for (var i = 0; i < options.length; i++) {
options[i].disabled = false;
options[i].style.display = '';
}
}

can you try this ?