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!
Important forum update
This forum is migrating to one unified Wix community forum starting July 26th, and will be read-only during the process.
Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
@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.
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.
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
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
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
I suggest starting with this example: https://www.wix.com/code/home/example/Cascading-Form.