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

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

尝试一下，

var getFilter = function(category) {
  var $selector = $("#filters ." + category + " option:selected");
  var filter = $selector.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 />