First post on here and I'm not particularly technical so please bare with me! I am trying to create multiple conditional dropdowns in the Wix website builder so that the contents of each dropdown is dependent on the selection from the previous one. My database is called 'Categorys' and the Columns are "category"& "subcategory". The dropdown menus are called #dropdown 1 & #dropdown2.
The first dropdown not populates from the database however when something is selecting it doesn't populate the second dropdown so I'm not sure if the code is firing or not. My code is below, any help would be much appreciated as I've been struggling with this for days!!
import wixData from 'wix-data';
$w.onReady(function () {
uniqueDropDown1();
});
function uniqueDropDown1 (){
wixData.query("Categorys")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown1").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.category);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function dropdown_change(event, $w) {
uniqueDropDown2();
$w("#dropdown2").enable();
}
function uniqueDropDown2 (){
wixData.query("Categorys")
.contains("fieldkey", $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.subcategory);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}