How to hide options based on another and switch it back if other option is deselected?

[gunishi]

Hi all, 

I have a requirement where on a CI if a user chooses mutligrain bread, they shouldn't be able to pick a strawberry smoothie. 

I have an onChange client script that hides the option. I have tried setReadOnly, setVisible, removeOption and all successfully remove the option, however, if the user changes their mind and then clicks on white bread, the strawberry smoothie option doesn't reappear. 

How would I go about implementing this? Is the onChange client script in the right direction or is that completely wrong?

Any help would be much appreciated. 

Kind regards, 

G

[chaudharymahesh · Accepted solution]

could you please try below code: 


function onChange(control, oldValue, newValue, isLoading) {

if (isLoading || newValue == '') {

return;

}

if (newValue == 'multigrain') {

g_form.setVisible('strawberry_smoothie',false);

g_form.setVisible('blueberry_smoothie',false);

} 

if(newValue == 'white bread') {

g_form.setVisible('strawberry_smoothie',true);

g_form.setVisible('blueberry_smoothie',true);

}

}

[gunishi · Accepted solution]

Hi there, 

Managed to solve this with the help of @chaudharymahesh 

function onChange(control, oldValue, newValue, isLoading) {

if (isLoading || newValue == '') {

return;

}

if (newValue == 'multigrain') {

g_form.setVisible('strawberry_smoothie',false);

g_form.setVisible('blueberry_smoothie',false);

}

if (newValue != 'multigrain'){

g_form.setVisible('strawberry_smoothie', true);

g_form.setVisible('blueberry_smoothie',true);

}

}

Hope this helps someone!

[Baatyr Patta]

does setVisible() work for choice values as well? I am struggling with two fields values. 
Catalog Item field 'category' (select box --> choice table) has two choice options (a and b). Second catalog item field 'subcategory' has four choice options (c, d, e, f). My goal is by selecting  a --> c, d visible. By selecting b --> e,f visible. I tried with different client script options but it works only for first selection.

[Sid_Takali]

Hi @Baatyr Patta Can you share what you have tried? 

[Sid_Takali]

Hi @Baatyr Patta Try this client script code 

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue === '') {
        return;
    }
    var subcategoryField = g_form.getControl('subcategory');
    var categoryValue = g_form.getValue('category');

    // Hide all options first
    g_form.setDisplay('subcategory', false, false);

    // Show options based on category selection
    if (categoryValue === 'a') {
        g_form.setDisplay('subcategory', true, true);
        g_form.setOption('subcategory', 'c', true);
        g_form.setOption('subcategory', 'd', true);
    } else if (categoryValue === 'b') {
        g_form.setDisplay('subcategory', true, true);
        g_form.setOption('subcategory', 'e', true);
        g_form.setOption('subcategory', 'f', true);
    }
}

Regards,

Sid

[Baatyr Patta]

Hi Sid,

thanks for your response. I tried different options with condition if newValue() , but it worked only for the first selection. When I changed the 'category' field then the options in 'subcategory' field were not visible or all options were visible.

I tried your code but I got an error message. And first variable is in gray color. You can see the code and error below in the attachment. 
What would be your thoughts on that?