Filtering gallery items with dropdown

Ask the community
, ,
1

Hello, I’m looking to filter gallery items with dropdown box. I looked through the forms and found several posts with useful information and codes. The dropdown is connected to a dataset but the list is not; they’re manually typed. Currently, this is my code:

import wixData from "wix-data";

$w.onReady(function () {
	//start with no filter
	$w("#dataset1").setFilter(wixData.filter());
});

export function ddMarketSelect_change(event) {
	//Add your code for this event here: 
	let myValue = $w('#ddMarketSelect').value;
	console.log(myValue,"myValue")
	
	if (myValue === "All") {
		$w('#dataset1').setFilter(wixData.filter());
		console.log("yes",myValue);
	} else {
		$w('#dataset1').setFilter(wixData.filter()
		.eq("market",$w('#ddMarketSelect').value));
		console.log("no",myValue);
	}
}

I have 3 questions/problems with the current code.

  1. I have the first item on the dropdown to be ‘All’ which should reset the filter (or set the filter to none.) Using if statement to match the value, it works. But is there any better way to do this?
  2. When re-selecting ‘All’ from the dropdown, the filter works (as in reset to none) but the dropdown would immediately bounce to show ‘Hospitality’ without applying the filter. Why and how is this happening? I can’t figure it out.
  3. When the page is load, the dropdown always show the 2nd item (which is ‘Hospitality’) regardless of the setting in ‘show text on load’ section and the filter isn’t applied. To actually filter for ‘Hospitality’ one would have to select another item on the list before. This probably is related to last question.

My goal is:

  1. Have ‘All’ as the first item in the dropdown which would reset the filter.
  2. Have the dropdown behave as expected.

Thanks for the help in advance!

2

Hi!, I have exactly the same problem