Нужна помощь в применении фильтров, выбрать, 2 значения опции против 1, Javascript, HTML

Я хочу добавить дополнительное значение опции » 9 » как в Афганистан, так и в Албанию. Пример: таким образом, когда я применяю фильтр Албания и 1 фунт, я получаю оба результата: и .

HTML:

<p>Filter: </p>
    <select class="filterby">
        <option value="L"><h5>Afghanistan</h5></option>
        <option value="E"><h5>Albania</h5></option>
    </select>

<p>Location: </p>
    <select class="filterby">
         <option value="1"><h5>1 Pound</h5></option>
         <option value="2"><h5>2 Pound</h5></option>
    </select>

<div id="FilterContainer">
    <div class="E 1"></div>
    <div class="E 2"></div>

    <div class="L 1"></div>
    <div class="L 2"></div>

    <div class="9 1"></div>
    <div class="9 2"></div>

</div>

ЯВАСКРИПТ:

<script type="text/javascript">//<![CDATA[
    window.onload=function(){
    $('#FilterContainer').hide();

    $("select.filterby").change(function(){
        var filters = $.map($("select.filterby").toArray(), function(e){
            return $(e).val();
        }).join(".");
        $("div#FilterContainer").find("div").hide();
    $('#FilterContainer').show(); 
        $("div#FilterContainer").find("div." + filters).show(); 
    });
    }//]]> 

</script>

1 ответ

  1. я добавил атрибут к опциям первого select, который мы можем рассматривать этот атрибут как второе значение, которое вы хотите добавить :

    <p>Filter: </p>
        <select class="filterby" id="allCountries">
            <option value="L" dataSec="8"><h5>Afghanistan</h5></option>
            <option value="E" dataSec="9"><h5>Albania</h5></option>
        </select>
    
    <p>Location: </p>
        <select class="filterby">
             <option value="1"><h5>1 Pound</h5></option>
             <option value="2"><h5>2 Pound</h5></option>
        </select>
    
    <div id="FilterContainer">
        <div class="E 1"></div>
        <div class="E 2"></div>
    
        <div class="L 1"></div>
        <div class="L 2"></div>
    
        <div class="9 1"></div>
        <div class="9 2"></div>
    
    </div>
    

    и js:

    $('#FilterContainer').hide();
    
      $("select.filterby").change(function(){
        var filters = $.map($("select.filterby").toArray(), function(e){
          return $(e).val();
        });
        var secondVal = $("#allCountries option:selected").attr('dataSec');
    
    
        $("div#FilterContainer").find("div").hide();
        $('#FilterContainer').show(); 
        $("div#FilterContainer").find("div." + filters.join('.')).show(); 
        $("div#FilterContainer").find("div." + secondVal + "." + filters[1]).show(); 
      });
    

    демо здесь: https://jsfiddle.net/IA7medd/bwhrj68r/1/