Javascript 过滤器选择而不是复选框

Question

我目前正在开发一个需要过滤多个选项的简单项目。我在网上偶然发现了一个使用复选框的解决方案，但我需要使用选择下拉列表而不是复选框。

原始解决方案可以在这里找到:http://jsfiddle.net/ar3PY/103/

它使用复选框

<input class="brand" type="checkbox" value="AsiaPacific">Asia Pacific
<input class="brand" type="checkbox" value="Australia">Australia

<input class="class" type="checkbox" value="Compact">Compact<br>
<input class="class" type="checkbox" value="Limousine">Limousine<br>
<input class="class" type="checkbox" value="SUV">SUV<br>
<input class="class" type="checkbox" value="Sport">Sport<br>

但我正在尝试将其转换为选择

<select class="brand">
    <option>--</option>
    <option value="AsiaPacific">Asia Pacific</option>
    <option value="Australia">Australia</option>
</select>

<select class="class">
    <option>--</option>
    <option value="Compact">Compact</option>
    <option value="Limousine">Limousine</option>
    <option value="SUV">SUV</option>
    <option value="Sport">Sport</option>
</select>

原js如下

var getFilter = function(category) {
    var filter = $("#filters ." + category + ":checked").map(function() {
        return '[data-filter*="' + this.value + '"]';
    }).get().join(",");
    filter = (filter.length > 0) ? filter : "*";
    return filter;
}
$("#filters :checkbox").click(function() {
    var all = $(".filterme");
    var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color"));
    all.not(tgts).hide();
    tgts.show();
});

我已将其修改为以下内容:

var getFilter = function(category) {
    var filter = $("#filters ." + category + "option:selected").map(function() {
        return '[data-filter*="' + this.value + '"]';
    }).get().join(",");
    filter = (filter.length > 0) ? filter : "*";
    return filter;
}
$("#filters select").on('change', function() {
    var all = $(".filterme");
    var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color"));
    all.not(tgts).hide();
    tgts.show();
});

这有点简单，但它不起作用。我假设问题出在 getFilter 映射函数上，但我似乎不知道下一步该做什么。

Answer 1

您需要为选择的子选择器 option $("#filters ."+ Category + "option:selected") 提供一个空格，并使用 multiple 在您选择元素中选择多个值。尝试以下代码片段供您引用，

var getFilter = function(category) {
    var filter = $("#filters ." + category + " option:selected").map(function() {
        return '[data-filter*="' + this.value + '"]';
    }).get().join(",");
    filter = (filter.length > 0) ? filter : "*";
    return filter;
}
$("#filters select").on('change', function() {
    var all = $(".filterme");
    var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color"));
    all.not(tgts).hide();
    tgts.show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><strong>Find the right model: </strong>Select one or more checkboxes to filter your choice:</p>


<table id="filters" width="620px">
  <tr>
    <td width="144" align="left" valign="top">
      <select class="brand" multiple>
        <option value="AsiaPacific">Asia Pacific</option>
        <option value="Australia">Australia</option>
      </select>
    </td>
    <td width="233" align="left" valign="top">
      <select class="class" multiple>
        <option value="Compact">Compact</option>
        <option value="Limousine">Limousine</option>
        <option value="SUV">SUV</option>
        <option value="Sport">Sport</option>
      </select>
    </td>
    <td width="233" align="left" valign="top">
      <select class="class" multiple>
        <option value="silver">silver</option>
        <option value="blue">blue</option>
        <option value="red">red</option>
        <option value="white">white</option>
      </select>

    </td>
  </tr>
</table>






<div class="text"></div>
<div id="log" style="width:620px; line-height: 19px"></div>

<!-- new Car 1 -->

<div style="border-top:1px dotted black; padding:3px; width: 620px" class="filterme" data-filter="AsiaPacific Compact silver blue red">
  <strong>AsiaPacific A1</strong><br /> AsiaPacific, Compact, silver, blue, red
</div>
<br />

<!-- new Car 2 -->

<div style="border-top:1px dotted black; padding:3px; width: 620px" class="filterme" data-filter="Australia Compact red white">
  <strong>Australia 118i</strong><br /> Australia Compact red white
</div>
<br />

<!-- new Car 3 -->

<div style="border-top:1px dotted black; padding:3px; width: 620px" class="filterme" data-filter="AsiaPacific Limousine Sport silver blue red">
  <strong>AsiaPacific A4</strong><br /> AsiaPacific Limousine Sport silver blue red
</div>
<br />

<!-- new Car 4 -->

<div style="border-top:1px dotted black; padding:3px; width: 620px" class="filterme" data-filter="Australia SUV Sport white blue silver">
  <strong>Australia X3</strong><br /> Australia SUV Sport white blue silver
</div>
<br />

<!-- new Car 5 -->

<div style="border-top:1px dotted black; padding:3px; width: 620px" class="filterme" data-filter="AsiaPacific Sport Silver">
  <strong>AsiaPacific R8</strong><br /> AsiaPacific Sport Silver
</div>
<br />

<!-- new Car 6 -->

<div style="border-top:1px dotted black; padding:3px; width: 620px" class="filterme" data-filter="Australia Sport white silver blue">
  <strong>Australia Concept X</strong><br /> Australia Sport white silver blue
</div>
<br />