Dependent Dropdown

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!

I suggest starting with this example:

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

Try this:

if ($w('#country').value === 'United States') { // first level dropdown
    $w('#state').options = usStates;
    $w('#state').placeholder = 'Select a State'; 
    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'; 
if ($w('#country').value === 'otherCountry') { 
    $w('#state').options = otherCountryStates; 
    $w('#state').placeholder = 'Select a Province'; 

Good luck!


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

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’;
else if ($w(‘#Makeddl’).value === ‘Canada’) {
$w(‘#Modelddl’).options = FORD_Models;
$w(‘#Modelddl’).placeholder = ‘Select a Province’;
else {
$w(‘#Modelddl’).value = ‘’;

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.

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

@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 () {
//  code to set up the drop down from the dataset
function uniqueDropDown1 (){
      .then(results => {
 const assemblyLocationCode = getUniqueTitles(results.items);
 let dropdownOptions = $w("#dropdown1").options;
           $w("#dropdown1").options = buildOptions(assemblyLocationCode)
 function getUniqueTitles(items) {
 const titlesOnly = => item.assemblyLocationCode);
 return [ Set(titlesOnly)];
 function buildOptions(uniqueList) {
 return => {
 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.