jqueryデータ属性条件付き検索

Question

jqueryのデータ属性を使用してドロップダウンから値を検索しています。ここでは、以下の..私はここでやっている何の事です

私はブランド、チャネルおよびタイプから製品を探しています私のデモで見ることができるように

$(document).ready(function() { 
 

 

 
    // Default selected as blank value 
 
       $('#search_by_brand').prop('selectedIndex', ""); 
 
       
 
       // Our work page - Search by Brand 
 
       $('#search_by_brand').change(function() { 
 
        $('#search_by_channel').prop('selectedIndex', ""); 
 
        $('#search_by_type').prop('selectedIndex', ""); 
 
       
 
        var brand_value = $(this).val(); 
 
        
 
        if(brand_value != '') 
 
        {      
 
         $(".filtr-container div").hide();     
 
         $(".filtr-container div[data-brand='"+ brand_value + "']").show().children().show(); 
 
         $(".filtr-container").find(".mask").show();    
 
         
 
        } 
 
        else 
 
        { 
 
         $(".filtr-container div").show();     
 
        } 
 

 

 
        // getting the lenght of number of divs which are available .. 
 
        var visible_divs = $('.filtr-container').children('div:visible').length; 
 

 
        if(visible_divs == 0) 
 
        { 
 
         $(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');      
 
        } 
 
        else 
 
        { 
 
         $(".no_records").remove(); 
 
        } 
 

 

 
        
 
       }); 
 

 

 
       // Default selected as blank value 
 
       $('#search_by_channel').prop('selectedIndex', ""); 
 
       
 
       // Our work page - Search by Product Channel 
 
       $('#search_by_channel').change(function() { 
 

 
        $('#search_by_brand').prop('selectedIndex', ""); 
 
        $('#search_by_type').prop('selectedIndex', ""); 
 
       
 
        var channel_value = $(this).val();      
 
        if(channel_value != '') 
 
        {      
 
         $(".filtr-container div").hide();     
 
         $(".filtr-container div[data-channel='"+ channel_value + "']").show().children().show();  
 

 
         $(".filtr-container").find(".mask").show();    
 
         
 
        } 
 
        else 
 
        { 
 
         $(".filtr-container div").show();     
 
        } 
 

 
        // getting the lenght of number of divs which are available .. 
 
        var visible_divs = $('.filtr-container').children('div:visible').length; 
 

 
        if(visible_divs == 0) 
 
        { 
 
         $(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');      
 
        } 
 
        else 
 
        { 
 
         $(".no_records").remove(); 
 
        } 
 

 
       }); 
 

 

 

 
       // Default selected as blank value 
 
       $('#search_by_type').prop('selectedIndex', ""); 
 
       
 
       // Our work page - Search by Product Type 
 
       $('#search_by_type').change(function() { 
 

 
        $('#search_by_brand').prop('selectedIndex', ""); 
 
        $('#search_by_channel').prop('selectedIndex', ""); 
 
       
 
        var type_value = $(this).val();      
 
        if(type_value != '') 
 
        {      
 
         $(".filtr-container div").hide();     
 
         $(".filtr-container div[data-type='"+ type_value + "']").show().children().show();  
 

 
         $(".filtr-container").find(".mask").show();    
 
         
 
        } 
 
        else 
 
        { 
 
         $(".filtr-container div").show();     
 
        } 
 
        
 
        // getting the lenght of number of divs which are available .. 
 
        var visible_divs = $('.filtr-container').children('div:visible').length; 
 

 
        if(visible_divs == 0) 
 
        { 
 
         $(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');      
 
        } 
 
        else 
 
        { 
 
         $(".no_records").remove(); 
 
        } 
 

 
       }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="form-inline"> 
 
     \t <div class="form-group"> 
 
     \t <label class="control-label">Brand</label> 
 
      
 
      \t <select class="form-control" id="search_by_brand" name="search_by_brand"> 
 
      \t  <option value="">Select Product Brand</option> 
 
       \t <option value="GLAM">GLAM</option> 
 
        <option value="PEDIGREE">PEDIGREE</option> 
 
        <option value="NESTLE">NESTLE</option> 
 
        <option value="HAVAIANAS">HAVAIANAS</option> 
 
        <option value="ROYAL CANIN">ROYAL CANIN</option> 
 
        <option value="EUKANUBA">EUKANUBA</option> 
 
       </select> 
 
     </div> 
 
     
 
     \t <div class="form-group m-l-30"> 
 
     \t <label class="control-label">Channel</label> 
 
      
 
      \t <select class="form-control" id="search_by_channel" name="search_by_channel"> 
 
      \t  <option value="">Select Product Channel</option> 
 
       \t <option value="Pharmacy">Pharmacy</option> 
 
        <option value="Pet">Pet</option> 
 
        <option value="Department Store">Department Store</option> 
 
        <option value="Vet">Vet</option> 
 
       </select> 
 
     </div> 
 
     
 
     <div class="form-group m-l-30"> 
 
     \t <label class="control-label">Type</label> 
 
      
 
      \t <select class="form-control" id="search_by_type" name="search_by_type"> 
 
      \t  <option value="">Select Product Type</option> 
 
       \t <option>Advertisement</option> 
 
        <option>Campaign</option> 
 
       </select> 
 
     </div> 
 
     </form> 
 
     
 
     
 

 
<div class="filtr-container"> 
 

 

 

 
     
 
      
 
      <div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="GLAM" data-channel="Vet" data-type="Advertisement"> 
 
       <div class="view-inner view-first text-center"> 
 

 
        <a href="http://localhost/5p_front/product/10"> 
 
        
 
        <img src="http://static.tumblr.com/yka2yx5/YHAm28h2j/glam_fb.jpg" height="20%" width="20%">      
 
         <div class="mask"> 
 
         <p> 
 
          <span class="f-s-23">GLAM</span><br> 
 
          <span class="f-s-23 lobstar">Daily Care</span><br> 
 
          <span class="roboto-light">Vet</span><br> 
 
         </p> 
 
         </div> 
 
        
 
        
 
        </a> 
 
        </div> 
 
       <div class="filter-shadow"></div> 
 
      </div> 
 
     
 
      
 
      <div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="ROYAL CANIN" data-channel="Pet" data-type="Advertisement"> 
 
       <div class="view-inner view-first text-center"> 
 

 
        <a href="http://localhost/5p_front/product/9"> 
 
        
 
        <img src="http://www.royalcanin.com.au/extension/site_subsidiary_v3/design/subsidiary_v3/images/article/no-img-article.png" height="20%" width="20%">      
 
         <div class="mask"> 
 
         <p> 
 
          <span class="f-s-23">ROYAL CANIN</span><br> 
 
          <span class="f-s-23 lobstar">Feline Gondola End</span><br> 
 
          <span class="roboto-light">Pet</span><br> 
 
         </p> 
 
         </div> 
 
        
 
        
 
        </a> 
 
        </div> 
 
       <div class="filter-shadow"></div> 
 
      </div> 
 
     
 
      
 
      <div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="HAVAIANAS" data-channel="Department Store" data-type="Advertisement"> 
 
       <div class="view-inner view-first text-center"> 
 

 
        <a href="http://localhost/5p_front/product/8"> 
 
        
 
        <img src="http://image.brazilianbikinishop.com/images/products/flipflop-havaianas-brasil-logo-green-0.jpg" height="20%" width="20%">      
 
         <div class="mask"> 
 
         <p> 
 
          <span class="f-s-23">HAVAIANAS</span><br> 
 
          <span class="f-s-23 lobstar">Pop Up</span><br> 
 
          <span class="roboto-light">Department Store</span><br> 
 
         </p> 
 
         </div> 
 
        
 
        
 
        </a> 
 
        </div> 
 
       <div class="filter-shadow"></div> 
 
      </div> 
 
     
 
      
 
      <div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="NESTLE" data-channel="Pharmacy" data-type="Advertisement"> 
 
       <div class="view-inner view-first text-center"> 
 

 
        <a href="http://localhost/5p_front/product/7"> 
 
        
 
        <img src="http://www.indiantelevision.com/sites/drupal7.indiantelevision.co.in/files/images/mam-images/2016/04/18/mam%20financials.jpg" height="20%" width="20%">      
 
         <div class="mask"> 
 
         <p> 
 
          <span class="f-s-23">NESTLE</span><br> 
 
          <span class="f-s-23 lobstar">Good Life</span><br> 
 
          <span class="roboto-light">Pharmacy</span><br> 
 
         </p> 
 
         </div> 
 
        
 
        
 
        </a> 
 
        </div> 
 
       <div class="filter-shadow"></div> 
 
      </div> 
 
     
 
      
 
      <div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="PEDIGREE" data-channel="Pet" data-type="Advertisement"> 
 
       <div class="view-inner view-first text-center"> 
 

 
        <a href="http://localhost/5p_front/product/6"> 
 
        
 
        <img src="https://www.petsworld.in/media/brands/6/pedigree2.jpg" height="20%" width="20%">      
 
         <div class="mask"> 
 
         <p> 
 
          <span class="f-s-23">PEDIGREE</span><br> 
 
          <span class="f-s-23 lobstar">Cleaner gets you closer</span><br> 
 
          <span class="roboto-light">Pet</span><br> 
 
         </p> 
 
         </div> 
 
        
 
        
 
        </a> 
 
        </div> 
 
       <div class="filter-shadow"></div> 
 
      </div> 
 
     
 
      
 
      <div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="GLAM" data-channel="Pharmacy" data-type="Advertisement"> 
 
       <div class="view-inner view-first text-center"> 
 

 
        <a href="http://localhost/5p_front/product/5"> 
 
        
 
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/06/GLAM_logo.png" height="20%" width="20%">      
 
         <div class="mask"> 
 
         <p> 
 
          <span class="f-s-23">GLAM</span><br> 
 
          <span class="f-s-23 lobstar">Beauty Bar</span><br> 
 
          <span class="roboto-light">Pharmacy</span><br> 
 
         </p> 
 
         </div> 
 
        
 
        
 
        </a> 
 
        </div> 
 
       <div class="filter-shadow"></div> 
 
      </div> 
 
     
 

 

 

 
     </div>

。しかし、私はAdvance Searchを複数のドロップダウンで同じものにする機能を有効にしたい。

今のところ、1つのドロップダウンでのみ検索しています。たとえば、商品ブランド「GLAM」と商品チャネル「薬局」を選択した場合、複数のドロップダウンで検索する機能が必要です。 "状態またはjqueryまたはそのようなもの..

同じように製品タイプにも適用する必要があります。どうすればよいですか？

おかげ

Answer 1

すべてselectの要素にクラスを割り当てると、コードはすべてselect elementsに同じであるようclass selectorを使用してchangeをバインドすることができます。

あなたはdropdownの値に基づいてfiltersを作成し、動的value of dropdownがselectedある場合filtersを追加することができます。

$(document).ready(function() { 

     $('.selectFilter').change(function() { 

      var brand_value = $("#search_by_brand").val(); 
      var channel = $('#search_by_channel').val(); 
      var type = $("#search_by_type").val(); 
      var channelFilter = ""; 
      var typeFilter = ""; 
      var brand_valueFiltr = ""; 
      if (brand_value != '') 
       brand_valueFiltr = "[data-brand='" + brand_value + "']"; 
      if (channel != '') 
       channelFilter = "[data-channel='" + channel + "']"; 
      if (type != '') 
       typeFilter = "[data-type='" + type + "']"; 


      $(".filtr-container div").hide(); 
      $(".filtr-container div" + brand_valueFiltr + channelFilter + typeFilter).show().children().show(); 
      $(".filtr-container").find(".mask").show(); 

      // getting the lenght of number of divs which are available .. 
      var visible_divs = $('.filtr-container').children('div:visible').length; 

      if (visible_divs == 0) { 
       $(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>'); 
      } 
      else { 
       $(".no_records").remove(); 
      } 
     }); 
    }); 

Here jsfiddleある