Hello everyone, I was wondering how I could do a dropdown that depends on another one.
Example :
Dropdown 1 : Icecream/CarParts
Dropdown 2 : If you select Icecream it'll have Strawberry/Chocolate/Vanilla etc...
If you select CarParts it'll have Motor/Battery/Seat etc...
Can someone please help me. (Also sorry for asking so many questions)
Hi Shan , nice to talk to you. I have checked your site , that's the idea I want. The problem is: I choose the choice in the first dropdown, I choose the choice in the second dropdown, but it doesn't give me the answer, I do not get the items I have chosen it does nothing. Eg: in your website I choose Australia in the first dropdown, I choose new South Wales in the second dropdown and it gives a result. The problem I have is I do not get any result. This is my wix code:
import wixData from 'wix-data'; $w.onReady(function (){ uniqueDropDown1(); }); function uniqueDropDown1 (){ wixData.query("SoCollection") .limit(1000) .find() .then(results => { const uniqueTitles = getUniqueTitles(results.items); $w('#dropdown1').options = buildOptions(uniqueTitles); }); function getUniqueTitles(items){ const titlesOnly = items.map(item => item.soCategory); return[...new Set(titlesOnly)]; } function buildOptions(uniqueList){ return uniqueList.map(curr =>{ return{label:curr, value:curr}; }); } } export function dropdown1_change(event, $w){ uniqueDropDown2(); $w("#dropdown2").enable(); } function uniqueDropDown2 (){ wixData.query("SoCollection") .contains("soCategory",$w("#dropdown1").value) .limit(1000) .find() .then(results => { const uniqueTitles = getUniqueTitles(results.items); $w('#dropdown2').options = buildOptions(uniqueTitles); }); function getUniqueTitles(items){ const titlesOnly = items.map(item => item.section); return[...new Set(titlesOnly)]; } function buildOptions(uniqueList){ return uniqueList.map(curr =>{ return{label:curr, value:curr}; }); } }
cascading form example . in corvid vy wix is not working, can i find in another place?
See the Cascading Form example.