(All the code is at the bottom of the post)
I am trying to make a live-updating gallery based on dropdown input but I can’t seem to make the dropdown selections do anything to the gallery. There are a lot of variables that could be messing it up but everytime I try to change something other issues pop-up.
As might be obvious I am quite a newbie to this, any help pointing out my mistakes would be greatly appreciated.
I have double-checked all the id’s so I don’t imagine those are the issue. I’ve also gone through the tutorials and other posts but I couldn’t find anything similar enough to my case.
Also, I assigned the searchList_change event to all 4 dropdowns.
import wixData from "wix-data";
import {bmwSuvModels, mercedesSuvModels} from 'public/suv-models';
import {suvBrands} from 'public/suv-brands';
import {sedanBrands} from 'public/sedan-brands';
$w.onReady(function() {
$w('#dropdown2').options = suvBrands;
$w('#dropdown1').onChange(() => {
if ($w('#dropdown1').value === 'SUV') {
$w('#dropdown2').options = suvBrands;
$w('#dropdown2').placeholder = 'Brand';
$w('#dropdown2').enable();
}
else if ($w('#dropdown1').value === 'Sedan') {
$w('#dropdown2').options = sedanBrands;
$w('#dropdown2').placeholder = 'Brand';
$w('#dropdown2').enable();
}
});
});
$w.onReady(function() {
$w('#dropdown2').onChange(() => {
if ($w('#dropdown2').value === 'BMW') {
$w('#dropdown3').options = bmwSuvModels;
$w('#dropdown3').placeholder = 'Brand';
$w('#dropdown3').enable();
}
else if ($w('#dropdown2').value === 'Mercedes') {
$w('#dropdown3').options = mercedesSuvModels;
$w('#dropdown3').placeholder = 'Brand';
$w('#dropdown3').enable();
}
});
});
export function searchList_change(event) {
wixData.query("Find your car")
.contains("Type", $w("#dropdown1").value)
.contains("Brand", $w("#dropdown2").value)
.contains("Model", $w("#dropdown3").value)
.contains("Model Year", $w("#dropdown4").value)
.find()
.then(res => {
$w("#gallery1").items = res.items;
$w("#gallery1").expand
});
}
