需要幫助應用過濾器，選擇，2選項值vs 1，Javascript，HTML

Question

我想爲阿富汗和阿爾巴尼亞都增加一個額外的選項值「9」。例如：當我申請過濾器阿爾巴尼亞和1磅時，我得到了兩個結果：41美元和22美元。

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">$41</div> 
    <div class="E 2">$48</div> 

    <div class="L 1">$28</div> 
    <div class="L 2">$33</div> 

    <div class="9 1">$22</div> 
    <div class="9 2">$25</div> 

</div> 

JAVASCRIPT：

<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> 

Answer 1

我添加的屬性，首先選擇的，我們可以認爲屬性作爲第二個值要添加的選項：

<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">$41</div> 
    <div class="E 2">$48</div> 

    <div class="L 1">$28</div> 
    <div class="L 2">$33</div> 

    <div class="9 1">$22</div> 
    <div class="9 2">$25</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/