I made a database search with 2 dropdown filters. both filters only show what is in teh database to choose from. My first dropdown is city. my second dropdown is category.
I want to be able to choose a city on my first dowpdown menu, which would trigger the second drop down menu to only have options that are in that city
Here is code right now, but dont know what to do next. i dont know how to have the second dropdown filter base its results off of the first dropdown selection
import wixData from ‘wix-data’;
//For full API documentation, including code examples visit http://wix.to/94BuAAs
$w.onReady(function () {
//TODO: import wixData from ‘wix-data’;
});
export function button2_click() {
wixData.query(‘Business’)
.contains(‘industry’, $w(‘#dropdown2’).value)
.contains(‘city’, $w(‘#dropdown1’).value)
.find()
.then(res => {
$w('#repeater1').data = res.items;
})
;
}
$w.onReady(function () {
wixData.query(“Business”)
.ascending(‘industry’)
.contains(‘city’, $w(‘#dropdown1’).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown2").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
// Use the map method to create the titlesOnly object containing all the titles from the query results
const titlesOnly = items.map(item => item.industry);
// Return an array with a list of unique titles
return [...new Set(titlesOnly)];
}
// Creates an array of objects in the form {label: "label", value: "value"} from the array of titles
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return {label:curr, value:curr};
});
}
});
$w.onReady(function () {
wixData.query(“Business”)
.ascending(‘city’)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown1").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
// Use the map method to create the titlesOnly object containing all the titles from the query results
const titlesOnly = items.map(item => item.city);
// Return an array with a list of unique titles
return [...new Set(titlesOnly)];
}
// Creates an array of objects in the form {label: "label", value: "value"} from the array of titles
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return {label:curr, value:curr};
});
}
});