I have one collection titled: Areas_generales. It has two columns:
Column 1: Area
Column 2: categoria
On a page I have 2 dropdowns. The first one is dedicated to Area , and the second is for categoria. The function I want to happen is for when someone chooses item from the area dropdown, Dropdown2 Will have the correct categories attached to it.
I’m able to get results for the area drop down, but even though I choose an option, it doesn’t enable dropdown2, nor does it show the categories. I’ll attach some screenshots to better explain myself.
P.s: the code is based from a YT tutorial.
import wixData from ‘wix-data’ ;
$w.onReady( function () {
areadropdown_change();
});
export function areadropdown_change (){
wixData.query( "Areas_generales" )
.limit( 1000 )
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w( "#areadropdown" ).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.area);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function area_change(event, $w) {
uniqueDropDown2();
$w( “#categoriadropdown” ).enable();
}
function uniqueDropDown2 (){
wixData.query( "Areas_generales" )
.contains( "area" , $w( "#areadropdown" ).value)
.limit( 1000 )
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w( "#categoriadropdown" ).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.categoria);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}