I need help with Conditional filtering dropdowns

Ask the community
, ,
1

1279×422 46 KB

Hi ,

I am trying to create a conditional dropdown filter with multiple options. One of my issues is the values will not appear in the dropdown menu and i do not know how to set up this conditional filtering up properly. Can someone please help me?

Below is the code:

//Conditional Dropdown
$w . onReady ( function () {

 $w ( '#restaurantLocation' ). options  =  restaurantLocation ; 
 $w ( '#restaurantLocation' ). placeholder  =  'All locations' ; 

 $w ( '#restaurantLocation' ). onChange (() => { 

     let  location  =  $w ( "#restaurantLocation" ). value 
     $w ( "#dataset1" ). setFilter ( wixData . filter () 
         . eq ( 'location' ,  location )) 

     if  ( $w ( '#restaurantLocation' ). value  ===  'England' ) { 
         $w ( '#restaurantCuisine' ). options  =  restaurantCuisine ; 
         $w ( '#restaurantCuisine' ). placeholder  =  'England Cuisine' ; 
         $w ( '#Restaurant' ). options  =  englandRestaurants ; 
         $w ( '#Restaurant' ). placeholder  =  'Restaurants' ; 
         $w ( '#Restaurant' ). enable (); 
         $w ( '#restaurantCuisine' ). enable (); 

         
      if  ( $w ( '#restaurantLocation' ). value  ===  'Ireland' ) { 
         $w ( '#restaurantCuisine' ). options  =  restaurantCuisine ; 
         $w ( '#restaurantCuisine' ). placeholder  =  'Ireland Cuisine' ; 
         $w ( '#Restaurant' ). options  =  irelandRestaurants ; 
         $w ( '#Restaurant' ). placeholder  =  'Restaurants' ; 
         $w ( '#Restaurant' ). enable (); 
         $w ( '#restaurantCuisine' ). enable (); 


      if  ( $w ( '#restaurantLocation' ). value  ===  'America' ) { 
         $w ( '#restaurantCuisine' ). options  =  restaurantCuisine ; 
         $w ( '#restaurantCuisine' ). placeholder  =  'America Cuisine' ; 
         $w ( '#Restaurant' ). options  =  americaRestaurants ; 
         $w ( '#Restaurant' ). placeholder  =  'Restaurants' ; 
         $w ( '#Restaurant' ). enable (); 
         $w ( '#restaurantCuisine' ). enable ();

if ( $w ( ‘#restaurantLocation’ ). value === ‘Wales’ ) {
$w ( ‘#restaurantCuisine’ ). options = restaurantCuisine ;
$w ( ‘#restaurantCuisine’ ). placeholder = ‘Wales Cuisine’ ;
$w ( ‘#Restaurant’ ). options = walesRestaurants ;
$w ( ‘#Restaurant’ ). placeholder = ‘Restaurants’ ;
$w ( ‘#Restaurant’ ). enable ();
$w ( ‘#restaurantCuisine’ ). enable ();

if ( $w ( ‘#restaurantLocation’ ). value === ‘Belgium’ ) {
$w ( ‘#restaurantCuisine’ ). options = restaurantCuisine ;
$w ( ‘#restaurantCuisine’ ). placeholder = ‘Belgium Cuisine’ ;
$w ( ‘#Restaurant’ ). options = belgiumRestaurants ;
$w ( ‘#Restaurant’ ). placeholder = ‘Restaurants’ ;
$w ( ‘#Restaurant’ ). enable ();
$w ( ‘#restaurantCuisine’ ). enable ();

     }  **else if**  ( $w ( '#restaurantLocation' ). value  ===  'Scotland' ) { 
         $w ( '#restaurantCuisine' ). options  =  restaurantCuisine ; 
         $w ( '#restaurantCuisine' ). placeholder  =  'Scotland Cuisine' ; 
         $w ( '#Restaurant' ). options  =  scotlandRestaurants ; 
         $w ( '#Restaurant' ). placeholder  =  'Restaurants' ; 
         $w ( '#Restaurant' ). enable (); 
         $w ( '#restaurantCuisine' ). enable (); 

     } 

     

     
 });

});

2

It would be something like this:

import wixData from 'wix-data'

$w.onReady(async () => {
    let data = await wixData.query("Restaurants").ascending("location").find()
    let titles = data.items.map(item => {
        return {
            label: item.title,
            value: item.title,
        }
    })
    $w('#dropdown1').options = titles
    $w('#dropdown1').onChange(() => {
        let locations = data.items.filter(item => item.title === $w('#dropdown1').value)
        let selectedLocations = locations.flatMap(item => item.location).map(item => {
            return {
                label: item,
                value: item,
            }
        })
        $w('#dropdown2').options = selectedLocations
        $w('#dropdown2').placeholder = "Location"
    })
})