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/

需要帮助应用过滤器，选择，2个选项值与1，Javascript，HTML

1 个答案: