Depending on another variable value, remove / add options in list collector

[JuliaHowells]

On a catalog item, I have two variables:

Location

Accessories

If the Location is TEST, then I need to hide two of the accessory options from the list collector view. Below I have an OnChange Client Script, but it does not appear to be removing or adding options. They all show in all scenarios. 

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }
    // if location is FLC, remove wireless keyboard and wireless mouse from options
    if (g_form.getValue('location') == 'cee089228779c91009d831583cbb35ba') { // TEST Sys ID
        //these items are in a list collector
        g_form.removeOption('special_accessories', 'Wireless keyboard' ,'Wireless keyboard');
        g_form.removeOption('special_accessories', 'Wireless mouse', 'Wireless mouse');
        g_form.addOption('special_accessories', 'Headset', 'Headset');
        g_form.addOption('special_accessories', 'Second monitor','Second monitor');
    } else {
        g_form.addOption('special_accessories', 'Wireless keyboard' , 'Wireless keyboard');
        g_form.addOption('special_accessories', 'Wireless mouse', 'Wireless mouse');
        g_form.addOption('special_accessories', 'Headset', 'Headset');
        g_form.addOption('special_accessories', 'Second monitor', 'Second monitor');
	}
}

 Any ideas?

[SAI VENKATESH]

Hi You can try the below code

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

    var selectedLoc = g_form.getValue('location');
    var SA = g_form.getControl('special_accessories');
    if (selectedLoc === 'cee089228779c91009d831583cbb35ba') { 
        removeOption('Wireless keyboard');
        removeOption('Wireless mouse');
    } else {
        addOption('Wireless keyboard');
        addOption('Wireless mouse');
    }
    function removeOption(optionValue) {
        for (var i = 0; i < SA.options.length; i++) {
            if (SA.options[i].value === optionValue) {
                SA.remove(i);
                break;
            }
        }
    }
    function addOption(optionValue) {
        var optionExists = false;
        for (var i = 0; i < SA.options.length; i++) {
            if (SA.options[i].value === optionValue) {
                optionExists = true;
                break;
            }
        }
        if (!optionExists) {
            SA.add(new Option(optionValue, optionValue));
        }
    }
}

Thanks and Regards

Sai Venkatesh

[JuliaHowells]

Same issue, all values show regardless of location

[AshishKM]

Hi @JuliaHowells , 

You can clear the option list before the IF condition and add only applicable options.

use g_form.clearOptions('special_accessories');

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }
    // if location is FLC, remove wireless keyboard and wireless mouse from options
     g_form.clearOptions('special_accessories'); 
    if (g_form.getValue('location') == 'cee089228779c91009d831583cbb35ba') { // TEST Sys ID
        //these items are in a list collector
        //g_form.removeOption('special_accessories', 'Wireless keyboard' ,'Wireless keyboard');
        //g_form.removeOption('special_accessories', 'Wireless mouse', 'Wireless mouse');
        g_form.addOption('special_accessories', 'Headset', 'Headset');
        g_form.addOption('special_accessories', 'Second monitor','Second monitor');
    } else {
        //g_form.addOption('special_accessories', 'Wireless keyboard' , 'Wireless keyboard');
        //g_form.addOption('special_accessories', 'Wireless mouse', 'Wireless mouse');
        g_form.addOption('special_accessories', 'Headset', 'Headset');
        g_form.addOption('special_accessories', 'Second monitor', 'Second monitor');
	}
}

-Thanks,

AshishKM

[JuliaHowells]

Same issue - values are not being removed.