Dependent Dropdown for User Input

Ask the community
, ,
1

Question:
I have added two Dropdowns to a page for user input. The second dropdown is populated with values that are dynamic depending on the selection in the first dropdown. For example, select Fruit in the first dropdown, the second dropdown will list Apples, Oranges and Pears. Select Vegetables in the first dropdown, and the second dropdown will list Cabbage, Cauliflower and Carrots

Product:**
Wix Studio Editor

What are you trying to achieve:
I want the second dropdown to populate with values based on the item selected in the first dropdown

What have you already tried:
I have created the following code…but it just will NOT work…

$w.onReady(function () {
// Define the options for the second dropdown based on the first dropdown’s selection
const options = {
“Bathroom”: [
{ label: “Small”, value: “Small” },
{ label: “Medium”, value: “Medium” },
{ label: “Large”, value: “Large” }
],
“Kitchen”: [
{ label: “Galley”, value: “Galley” },
{ label: “L Shape”, value: “L Shape” },
{ label: “U Shape”, value: “U Shape” }
],
“Laundry”: [
{ label: “Cupboard No Sink”, value: “Cupboard No Sink” },
{ label: “Stacked with Sink”, value: “Stacked with Sink” },
{ label: “Side by Side with Sink”, value: “Side by Side with Sink” }
]
};

// Set up the event handler for when the first dropdown value changes
$w('#dropdown1').onChange((event) => {
    const selectedValue = event.target.value;
    if (options[selectedValue]) {
        // Update the second dropdown with the appropriate options
        $w('#dropdown2').options = options[selectedValue];
    } else {
        // Clear the second dropdown if the selected value is not in the options object
        $w('#dropdown2').options = [];
    }
});

});

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]

2

If you are fine with it, The new Wix Forms has a feature called “Rule” that can do this sort of thing, You can use it to create conditional forms.