I thought maybe I show you the entire code. How I want it to work : there are 3 dependant dropdown menus, 2 are disabled onReady. When first dropdown gets a value second is enabled. Same goes for third which is dependant on second dropdown. Once all values are set, user clicks on Find and the respective filtered product will be extracted from dataset and displayed on the repeater. Now everything works fine, until the third dropdown which contains numbers on my dataset seems to “refuse” giving its value to the filter code (my own assumption). FYI : When I take out the piece of code for the third dropdown everything works fine and products are found. Code :
import wixData from ‘wix-data’ ;
$w.onReady( function () {
uniqueDropDown1();
});
function uniqueDropDown1() {
wixData.query( "PackagingSolutions" )
.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 dropdown1_change(event) {
uniqueDropDown2();
$w( "#dropdown2" ).enable();
}
function uniqueDropDown2() {
wixData.query( "PackagingSolutions" )
.contains( "category" , $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.displayName);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function dropdown2_change(event) {
uniqueDropDown3();
$w( "#dropdown3" ).enable();
}
function uniqueDropDown3() {
wixData.query( "PackagingSolutions" )
.contains( "category" , $w( "#dropdown1" ).value)
.limit( 1000 )
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w( "#dropdown3" ).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => String(item.capacity));
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function findProduct_click(event, $w) {
$w( “#dataset1” ).setFilter(wixData.filter().contains( “category” , $w( ‘#dropdown1’ ).value).and(wixData.filter().contains( “displayName” , $w( ‘#dropdown2’ ).value)).and(wixData.filter()
.contains( “capacity” , $w( ‘#dropdown3’ ).value)))
.then(() => {
getItems()
.then((results) => {
$w( '#repeater3' ).data = results.items;
});
});
}
function getItems() {
return $w( “#dataset1” ).getItems( 0 , 1000 )
.then((result) => {
return result;
});
}
