Filter div when select option is selected

Question

I have a page with different locations with different prices. When selecting an option the div is filtered with the value attribute. I have multiple select options. I want to filter the divs with location AND also ascending prices should be visible. Any other suggestions to filter with locations are also welcome.

$('select').each(function() {
  var $this = $(this),
    numberOfOptions = $(this).children('option').length;

  $this.addClass('select-hidden');
  $this.wrap('');
  $this.after('');

  var $styledSelect = $this.next('div.select-styled');
  $styledSelect.text($this.children('option').eq(0).text());

  var $list = $('', {
    'class': 'select-options'
  }).insertAfter($styledSelect);

  for (var i = 0; i < numberOfOptions; i++) {
    $('', {
      text: $this.children('option').eq(i).text(),
      rel: $this.children('option').eq(i).val()
    }).appendTo($list);
  }

  var $listItems = $list.children('li');

  $styledSelect.click(function(e) {
    e.stopPropagation();
    $('div.select-styled.active').not(this).each(function() {
      $(this).removeClass('active').next('ul.select-options').hide();
    });
    $(this).toggleClass('active').next('ul.select-options').toggle();
  });

  $listItems.click(function(e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide();
    //console.log($this.val());
  });

  $(document).click(function() {
    $styledSelect.removeClass('active');
    $list.hide();
  });

});

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      var optionValue = $(this).attr("value");
      if (optionValue) {
        $(".col-lg-4 ").not("." + optionValue).hide();
        $("." + optionValue).show();
      } else {
        $(".col-lg-4 ").hide();
      }
    });
  }).change();
});



  
    
      
      
        
          
            Buy
            Rent / PG
            Plot
            Commercial
          

          
          
            
              

                
                  
                  
                
                
                
                
                
              
            
            
              
                
                  
                  
                
                
                
                
                
              
            
            
              
                
                  
                  
                
                
                
                
                
              
            
          
        
      
      
    
    
  




    
    
    Project Gallery
        
            
                
                    
                    Nashik
                
                
                        Icon Construction
                        Makhmalabad, Behind Shantinagar
Bus Stop, Makhmalabad Road, Nashik.
                        2 BHK Flats
                    
                        ₹ 39 Lac
                        Onwards
                        See Details
                    
                
            
        
        
        
            
                
                    
                    Nashik
                
                
                        Dreamnano residency
                        Pushpak Nagar, Near Puspavinayak Temple, Mhasrul, Nashik.
                        1 BHK Flats
                    
                        ₹ 17.5 Lac
                        Onwards
                        See Details
                    
                
            
        
        
        
            
                
                    
                    Nashik
                
                
                        Icon Construction
                        Aadarsh row Bunglow, Aadarsh Nagar, NEAR 
A.T.PAWAR ASHRAM SCHOOL, BORGAD, MHASRUL, NASHIK.
                        2 BHK Flats
                    
                        ₹ 55 Lac
                        Onwards
                        See Details
                    
                
            
        
        
        
            
                
                    
                    Nashik
                
                
                        Home for Sale
                        Sakarpuja Apartment, Near Panchkrushn Lawn,
Konark Nagar, Near Jatra Hotel, Nashik.
                        2 BHK Flats
                    
                        ₹ 25 Lac
                        Onwards
                        See Details
                    
                
            
        
        
        
            
                
                    
                    Nashik
                
                
                        Home for Resale 
                        Gokuldham Soc.
Behind Sharad Pawar Market Yard, Peth Road, Makhmalabad, Nashik.
                        2 BHK Flats
                    
                        ₹ 27 Lac
                        Onwards
                        See Details
                    
                
            
        
        
        
            
                
                    
                    Nashik
                
                
                        Icon Construction
                        Aadarsh row Bunglow, Aadarsh Nagar, NEAR 
A.T.PAWAR ASHRAM SCHOOL, BORGAD, MHASRUL, NASHIK.
                        2 BHK Flats
                    
                        ₹ 55 Lac
                        Onwards
                        See Details

Swati · Accepted Answer

To achieve above one way would be storing value of selects in array as key-value pair because there multiple such select-boxes .

In below code i have first loop through all selects which are there under tab-pane then i have use 2 array one to store key-value i.e : if data-value="location" and value="makhbalabad" so key will be location and value will be makhbalabad and the other to store only keys i.e : location,price..etc.

Now , once we get all value from the selects we need to loop through Project Gallery divs .Then i have check if the value in array has class inside your div i.e : col-lg-4 if yes we can use some variable to store count and depending on this we will show or hide that divs .You can do same for other tab as well only add data-value in your select-boxes

Demo Code :

$(".col-lg-4").show();
$("select").change(function() {
  var arrSelected = [];
  var arrTypes = [];
  //loop through all selects inside a particular tab only
  $(this).closest(".tab-pane").find("select").each(function() {

    //check if value is undefined
    if (arrSelected[$(this).attr('data-value')] == undefined) {
      arrSelected[$(this).attr('data-value')] = [];
    }
    //add value in key value pair
    arrSelected[$(this).attr('data-value')].push($(this).val());
    //push key value in arry
    if ($.inArray($(this).attr('data-value'), arrTypes) < 0) {
      arrTypes.push($(this).attr('data-value')); //add key  to another array
    }

  })
  $(".col-lg-4").hide(); //hide all 
  //loop through divs
  $('.col-lg-4').each(function() {
    var intKeyCount = 0;
    //get keys of selcts
    for (key in arrTypes) {
      var blnFound = false;
      //get value at that keys
      for (val in arrSelected[arrTypes[key]]) {
        //check if the data attr matchs with class  or if value is hide
        if ($(this).hasClass(arrSelected[arrTypes[key]][val]) || (arrSelected[arrTypes[key]][val] == "hide")) {
          blnFound = true; //we found 
          break;
        }
      }
      if (blnFound) {
        intKeyCount++; //increment value 
      }
    }
    //check if it matches atleast one -filter or if you need to match all condition then use both 
    if ((intKeyCount > 0) && (intKeyCount == arrTypes.length)) {
      $(this).show(); //show
    } else {
      $(this).hide(); //hide
    }

  })
});






  

    
      
      
      
    
    
    
    
    
    
    
  



  
    
      Project Gallery
      
        
          
            
            Nashik
          
          
            Icon Construction
            Makhmalabad, Behind Shantinagar Bus Stop, Makhmalabad Road, Nashik.
            2 BHK Flats

            ₹ 39 Lac
            Onwards
            See Details
            
          
        
      

      
        
          
            
            Nashik
          
          
            Dreamnano residency
            Pushpak Nagar, Near Puspavinayak Temple, Mhasrul, Nashik.
            1 BHK Flats

            ₹ 17.5 Lac
            Onwards
            See Details
            
          
        
      

      
        
          
            
            Nashik
          
          
            Icon Construction
            Aadarsh row Bunglow, Aadarsh Nagar, NEAR A.T.PAWAR ASHRAM SCHOOL, BORGAD, MHASRUL, NASHIK.
            2 BHK Flats

            ₹ 55 Lac
            Onwards
            See Details
            
          
        
      

      
        
          
            
            Nashik
          
          
            Home for Sale
            Sakarpuja Apartment, Near Panchkrushn Lawn, Konark Nagar, Near Jatra Hotel, Nashik.
            2 BHK Flats

            ₹ 25 Lac
            Onwards
            See Details
            
          
        
      

      
        
          
            
            Nashik
          
          
            Home for Resale 
            Gokuldham Soc. Behind Sharad Pawar Market Yard, Peth Road, Makhmalabad, Nashik.
            2 BHK Flats

            ₹ 27 Lac
            Onwards
            See Details
            
          
        
      

      
        
          
            
            Nashik
          
          
            Icon Construction
            Aadarsh row Bunglow, Aadarsh Nagar, NEAR A.T.PAWAR ASHRAM SCHOOL, BORGAD, MHASRUL, NASHIK.
            2 BHK Flats

            ₹ 55 Lac
            Onwards
            See Details

Filter div when select option is selected

Answers (1)

Related Questions