Hide/Display multiselect column based on another multiselect column selection JavaScript

(0) Share

Report

Posted on by ALAN365

Hi expert,

Have a requirement, that hide/display multiselect column - abc_multiselect_A based on another multiselect column - abc_multiselect_B item select, if select choice value, for example: 101010003, display abc_multiselect_A, otherwise hiden it. Script as below:

function toggleMultiSelectVisibility(executionContext) {

debugger;

var formContext = executionContext.getFormContext();

var selectedOptions = formContext.getAttribute('abc_multiselect_B').getSelectedOption();

if (selectedOptions.filter(i => i.value != 101010003).length > 0) {

formContext.getControl("abc_multiselect_A").setVisible(false);

} else {

formContext.getControl("abc_multiselect_A").setVisible(true);

}

The error: selectedOptions = null.

Could you please help to fix? Thanks.

I have the same question (0)

All responses (5)

Answers (2)

ALAN365 on at

Like (0)

Report

Could anybody help to check why the variable selectedOptions cannot be assigned value? Thank you!

Was this reply helpful? Yes No
Suggested answer

Eiken on at

Like (0)

Report

Hi,

You can use the business rule without code.

Like the following example, hide the test optionB when the test optionA don't equal select1.

Result are as follow.

Was this reply helpful? Yes No
Verified answer

Eiken on at

Like (0)

Report
Hi,

I also test to using the Javascript to hide the field.

In your code, selectedOptions will not get value when the abc_multiselect_B is enpty.

Now i edit your code(Add the judgment statement and replace the filter function) for reference. This code will hide the test options B when choose select2 in test options A.

function toggleMultiSelectVisibility(executionContext) { var formContext = executionContext.getFormContext(); if(formContext.getAttribute('crd9d33_testoptiona').getSelectedOption()==null){ formContext.getControl("crd9d33_testoptionb").setVisible(false); }else{ var selectedOptions = formContext.getAttribute('crd9d33_testoptiona').getSelectedOption(); if (selectedOptions.value!==971420001) { formContext.getControl("crd9d33_testoptionb").setVisible(false); } else { formContext.getControl("crd9d33_testoptionb").setVisible(true); } } }

Tips: "971420001" is the value of select 2. crd9d33_testoptiona and crd9d33_testoptionb are logical name of test options.

By the way, you need to add this code to both "On change" and "On Load" to make sure execute the event in the initial state of form.

Results are as follow:

test optionB only appear when choose select2 in test optionA.

Was this reply helpful? Yes No
Verified answer

Eiken on at

Like (0)

Report
Hi,

I neglected to mention that you are using multiple choice and my code above uses single choice.

The filter function is correct.

Now I edit the code again. Please note that some of the details in the later judgement statements have also been changed

function toggleMultiSelectVisibility(executionContext) { var formContext = executionContext.getFormContext(); if(formContext.getAttribute('crd9d33_testmultiplechoice').getSelectedOption()==null){ formContext.getControl("crd9d33_testoptionb").setVisible(false); }else{ var selectedOptions = formContext.getAttribute('crd9d33_testmultiplechoice').getSelectedOption(); if (selectedOptions.filter(i => i.value == 971420000).length > 0) { formContext.getControl("crd9d33_testoptionb").setVisible(true); } else { formContext.getControl("crd9d33_testoptionb").setVisible(false); } } }

Was this reply helpful? Yes No
ALAN365 on at

Like (0)

Report

It's working! Thank you so much Eiken.

Was this reply helpful? Yes No