Dynamically hide/show choices items based on expression

UPD Here are two demos: Show/Hide choices in radiogroup/checkbox/dropdown Show/Hide individual items in radiogroup/checkbox/dropdown

That is probably the most requested functionality right now. We require writing the code to change the choices items in dropdown, radiogroup and checkbox questions. There are many scenarios where our users expect this functionality out of the box, without writing JavaScript code. There are two most popular scenario.

1. Show/hode all choices items based on selected values in checkbox For example in the first question, you are asking your user to select cars he drives or drived in the past, in the second questioon select the car he likes the most, from those he selected in the first question. The first question is checkbox, the second question is radiogroup. They have the same choices. The json should be look like:

{
 elements: [
  {type: "checkbox", name: "cars", choises: ["Audi", "BMW", "Mercedes", "Volkswagen"]}
  {type: "radiogroup", name: "bestcar", choises: ["Audi", "BMW", "Mercedes", "Volkswagen"],
  visibleIf: "{cars} notempty", choicesVisibleIf: "{cars} contains {item}"}
 ]
}

The second question is visible when at least one value is selected in the first question and it is already implemented. What should be implemented as well: choicesVisibleIf. It will run against each choice item and the choice item is visible if a user selected the choice value in the first question.

1. Show/hide a particular choice item based on answers in other questions. It is a more general implementation. Every choice item should have a visibleIf property. If this property is not empty, then based on expression evaluation, the item is visible or invisible. so the choice item can be

choices: [
  {value: "contactbyphone", "Could we contact you by phone", visibleIf: "{phone} notemty"},
  {value: "contactbyemail", "Could we contact you by e-mail", visibleIf: "{email} notemty"},
]

The first item is visible if question “phone” is not empty and the second item is visible if question “email” is not empty.

Note: The item.visibleIf has a higher priority than choicesVisibleIf property.

[andrewtelnov]

@szacchino You can do it by using custom function:

function canShowDynamicChoice(params) {
    if (!params || params.length != 4) return true;
    const panelValue = params[0] || [];
    const questionName = params[1];
    const index = params[2];
    const choiceValue = params[3];
    for (let i = 0; i < panelValue.length; i++) {
        if (i == index) continue;
        if (panelValue[i][questionName] == choiceValue) return false;
    }
    return true;
}
Survey.FunctionFactory.Instance.register(
    'canShowDynamicChoice',
    canShowDynamicChoice
);

const json = {
    questions: [
        {
            type: 'paneldynamic',
            name: 'panel1',
            panelCount: 2,
            templateElements: [
                {
                    name: 'question1',
                    type: 'dropdown',
                    choicesVisibleIf:
                        "canShowDynamicChoice({panel1}, 'question1', {panelindex}, {item})",
                    choices: [
                        'Item 1',
                        'Item 2',
                        'Item 3'
                    ],
                }
            ],
        },
    ],
};

const survey = new Survey.Model(json);

Here is the example.

Thank you, Andrew

[szacchino]

Is possible to use the “choices Visible If” for a dropdown/radio in a panel dynamic? I’d like to create a panel dynamic with a dropdown in it: whenever a user add a new panel, he/she can choose from the dropdown items not selected in other panels.