Apologies in advance if this a subject that has been gone over repeatedly. I’ve gone through a lot of material provided for how to load dropdowns via code. I think I’m heading in the right direction but can’t quite get what I want to work.
I have two collections, Countries and Cities, that I want to populate on a search page via dropdowns. Cities contains a reference field to Countries. The city dropdown should only enable once a country is selected.
Here is the code:
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixData from ‘wix-data’;
$w.onReady(() => {
//Set up the Country dropdown
wixData.query(‘Countries’)
.ascending(“title”)
.find()
.then(res => {
let options = [{
“value”: ‘’,
‘label’: ‘Select Country’
}];
options.push(…res.items.map(country => {
return {
‘value’: country._id,
‘label’: country.title
};
}));
$w(‘#countryDD’).options = options;
});
});
export function countryDD_change(event, $w) {
//Set up the City dropdown based on the selection made in the Country dropdown
console.log($w(‘#countryDD’).value);
wixData.query(‘Cities’)
.eq(“Country”, $w(‘#countryDD’).value)
.ascending(“title”)
.find()
.then(res => {
let options = [{
“value”: ‘’,
‘label’: ‘Select City’
}];
options.push(…res.items.map(city => {
return {
‘value’: city._id,
‘label’: city.title
};
}));
$w(‘#cityDD’).enable();
$w(‘#cityDD’).options = options;
});
}
The first dropdown seems to work fine. The console log shows the actual key (_id) of the country selected. Unfortunately, the City dropdown is not populated at all (except for the “Select City” label). This leads me to believe that there are no records being returned from the query.
Is there something obvious I’m missing?
)