@dilly Hi Dilly: I was just finishing a mini tutorial on this for you when the browser crashed and I lost the post. BUT I did keep the code I created :-).
OK There are many things that you need to consider to get the effect that you want. What I have done is to take your original question and answer that.
Here is the resulting code that I’ll explain below…
$w.onReady(function () {
uniqueDropDown1();
uniqueDropDown2();
$w('#dropdown1').onChange(dropdownHasChanged);
$w('#dropdown2').onChange(dropdownHasChanged);
$w('#resetDropdownsButton').onClick(resetDropdownsButton_clicked);
}
function resetDropdownsButton_clicked(event) {
$w('#dropdown1').selectedIndex = undefined;
$w('#dropdown2').selectedIndex = undefined;
dropdownHasChanged();
}
function uniqueDropDown1 (){
wixData.query("dresses2")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items, 'retailer');
$w("#dropdown1").options = buildOptions(uniqueTitles);
});
}
}
export function genre_change(event, $w) {
uniqueDropDown2("retailer");
$w("#dropdown2").enable();
}
function uniqueDropDown2 (filter) {
let query = wixData.query("dresses2");
if (filter) {
query = query.contains(filter, $w("#dropdown1").value);
}
query.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items, 'brand');
$w("#dropdown2").options = buildOptions(uniqueTitles);
});
}
function getUniqueTitles(items, columnKey) {
const titlesOnly = items.map(item => item[columnKey]);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
function dropdownHasChanged(event) {
let retailer = getRetailerDropDown();
let brand = getBrandDropDown();
let datasetFilter = wixData.filter(); // Empty filter
if (retailer) {
datasetFilter = datasetFilter.eq('retailer', retailer);
}
if (brand) {
datasetFilter = datasetFilter.eq('brand', brand);
}
$w('#dataset2').setFilter(datasetFilter);
}
function getBrandDropDown() {
let result = null;
// If there is a drop down selected the selectedIndex will be
// greater than or equal to 0
if ($w("#dropdown2").selectedIndex >= 0) {
result = $w("#dropdown2").value;
}
return result;
}
function getRetailerDropDown() {
let result = null;
// If there is a drop down selected the selectedIndex will be
// greater than or equal to 0
if ($w("#dropdown1").selectedIndex >= 0) {
result = $w("#dropdown1").value;
}
return result;
}
-
$w.onReady
The onReady function set up your main event handlers. I have made a minor change to your original code so that both drop downs can be enabled and used in combination together. I am not sure what the purpose of the genre_change event handler was but it should still work.
-
function resetDropdownsButton_clicked(event)
This function assumes that you will add a dropdowns reset button $w(‘#resetDropdownsButton’) to clear out the drop down values and reset them to their unselected state. There are other ways to do this but this shows you the code you need.
-
function uniqueDropDown1 ()
-
function uniqueDropDown2 (filter)
-
export function genre_change(event, $w)
These are your original functions. I have removed the getUniqueTitles and buildOptions functions from the uniqueDropDown1() and uniqueDropDown2() functions and made them first class functions because the code was repetitive.
I have made a minor modification to uniqueDropDown2() where I have added a filter. Your genre_change() event handler uses this with the ‘retailer’ filter to isolate the brand list by retailer. For the solution I have given you you don’t need to do this but you can if you want.
-
function getUniqueTitles(items, columnKey)
I have modified this slightly so that it can be used by both uniqueDropDown functions. Basically I have added the columnKey argument so that you can create a unique list from an array of objects (items) based on any column key. In this example the keys used are ‘retailer’ and ‘brand’
-
function buildOptions(uniqueList)
This function wasn’t changed. It has just been removed from the two uniqueDropDown functions and declared once. (Easier to maintain 
-
function dropdownHasChanged(event)
This function does all of the magic to filter your repeater.
Your repeater is bound to a dataset (dresses 2). The repeater changes its display based on the way the dataset is filtered.
- So we need to filter the dataset when the dropdown changes. We do this using the ← wix-dataset.setFilter function.
This uses a WixDataFilter to determine which columns to test to limit the items used by the dataset.
We construct a WixDataFilter with the help of the wix-data API. This API has a filter() function --------------------------->
This function returns a WixDataFilter that we can build on.
The WixDataFilter has a number of different helper functions to create some fairly sophisticated filters. We will focus on one though and that is the equals filter or <----------- .eq(). This allows us to ask the dataset to return only those items where the values in the column identified by a column field key (the propertyName) match a test value. e.g:
wixData.filter().eq('retailer', 'ASOS')
We can also add multiple helper functions to filter multiple column values. So to filter on a column field key ‘retailer’ = ‘ASOS’ and column field key ‘brand’ = ‘ASOS DESIGN’. The filter would look like this.
let datasetFilter = wixData.filter().eq('retailer', 'ASOS').eq('brand', 'ASOS DESIGN');
We can also use a javascript variable to build up the filter which is what we do in the dropdownHasChanged() function. This has added benefits in that if we reset the dropdown values then the filter we create will be empty which will essentially reset the dataset. So the following code results in the same outcome as the snippet before.
let datasetFilter = wixData.filter();
datasetFilter = datasetFilter.eq('retailer', 'ASOS');
datasetFilter = datasetFilter.eq('brand', 'ASOS DESIGN');
Since datasetFilter contains a WixDataFilter we can simply use it as an argument to setFilter.
$w('#dataset2').setFilter(datasetFilter);
We determine is there is something we can use by checking the selectedIndex property (see image to the right). If this property has a value of 0 or more then we have a value to filter with. NOTE: ----->
To reset the dropdown we need to set this property to undefined. That is what the reset function does for us.
These functions will set their result to the value of the drop down if there is a valid index. Otherwise the result will be null.
The null value forces the if() test in dropdownHasChanged to fail and so the filter for this dropdown value will not be set.
Hope this helps solve your problem!
Steve
