Dependent Dropdown

Discussion Ask a question
,
1

I am trying to create dependent drop-down e.g.

  1. Class
  2. Subject (based on selected Class)
  3. Topic (based on selected Subject)
  4. Title (based on selected Topic)

Can anyone please help!

2

I suggest starting with this example: https://www.wix.com/code/home/example/Cascading-Form.

3

This was helpful but only limited to two countries. How can I expand this model with multiple rows and 3/4 level drop-down…Really looking for your help…Thanks a lot in advance

4

Hi,
Try this:

if ($w('#country').value === 'United States') { // first level dropdown
    $w('#state').options = usStates;
    $w('#state').placeholder = 'Select a State'; 
    $w('#state').enable();
    
    if ($w('#state').value === 'NY') { // second level dropdown
        $w('#subState').options = arrayOfOptions
        $w('#subState').placeholder = 'Select here something';
        $w('#subState').enable(); // third level dropdown
        }
    } 
    
if ($w('#country').value === 'Canada') { 
    $w('#state').options = canadaStates; 
    $w('#state').placeholder = 'Select a Province'; 
    $w('#state').enable();
}
if ($w('#country').value === 'otherCountry') { 
    $w('#state').options = otherCountryStates; 
    $w('#state').placeholder = 'Select a Province'; 
    $w('#state').enable();
     
}

Good luck!

Roi

5

Thank you!
But rather than hard coding value, user can select an item from 1st drop-down and so on. The list of item is more than 25 in each drop-down

6

Thanks for the support but this is not working for me i tried these below:

import {TOYOTA_Models, FORD_Models} from ‘public/CarsModel’;

$w.onReady( function () {
$w(‘#Modelddl’).options = TOYOTA_Models;
$w(‘#Makeddl’).onChange(() => {
if ($w(‘#Makeddl’).value === ‘TOYOTA’) {
$w(‘#Modelddl’).options = TOYOTA_Models;
$w(‘#Modelddl’).placeholder = ‘Select a State’;
$w(‘#Modelddl’).enable();
}
else if ($w(‘#Makeddl’).value === ‘Canada’) {
$w(‘#Modelddl’).options = FORD_Models;
$w(‘#Modelddl’).placeholder = ‘Select a Province’;
$w(‘#Modelddl’).enable();
}
else {
$w(‘#Modelddl’).value = ‘’;
$w(‘#Modelddl’).disable();
}
});
});

and i have this in the js file

export const ToYOTA_Models = [

{value:“”, label: “Select a CAR”},

{value:“AV”, label: “AVALON”},
{value:“CA”, label: “CAMRY”},
];

export const FORD_Models = [
{value:“ER”, label: “EXPLORER”},
{value:“EN”, label: “EXPEDITION”},
];

but im getting this error , it works for the second option ( when i choose FORD it works ) but when i choose toyota i get this error :

Loading the code for the CarsModel page. To debug this code, open u3929.js in Developer Tools.Wix code SDK Warning: The options parameter of “Modelddl” that is passed to the options method cannot be set to null or undefined.

7

Can you explain this code a bit for a newbie. I am trying to wrap my mind around the public.js coding (the cascading form example does not show the functionality of it all. My desired use is not states, of course. I have Sections and Categories. Each section has xnumber of categories. So like the example, but not sure how to use the usStates to make this work

8

@siyamand-rashid did you resolve this issue? I am getting the same issue with my code to create a drop down from a dataset without linking the drop down. My site works, but I get that error in the debugger. My code is:

import wixData from 'wix-data'; 
$w.onReady(function () {
    uniqueDropDown1();
});
//  code to set up the drop down from the dataset
function uniqueDropDown1 (){
    wixData.query("1946-1952ChevroletVINInfo")
        .limit(1000)
      .find()
      .then(results => {
 const assemblyLocationCode = getUniqueTitles(results.items);
 let dropdownOptions = $w("#dropdown1").options;
           $w("#dropdown1").options = buildOptions(assemblyLocationCode)
            });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.assemblyLocationCode);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
        });
    }
}

I use this same code tied to 3 different lists of information in the same dataset, hence the three errors below.

1916×119 9.44 KB