CODEWITHSUNDEEP
javascriptjqueryfilter
false-hero
false-hero

Reputation: 79

Javascript filter select instead of check box

I'm currently working on a simple project that requires filtering multiple options. I stumbled upon a solution online that uses checkboxes but I needed to use a select dropdown instead of checkbox.

The original solution can be found here: http://jsfiddle.net/ar3PY/103/

It uses checkboxes

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

But I'm trying to convert it to select

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

Original js is below

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();
});

And I have modified it to below:

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();
});

It's a bit simple however it's not working. I am assuming the problem lies on the getFilter map function but I can't seem to figure out what to do next.

Upvotes: 0

Views: 472

Answers (1)

Rohan Kumar
Rohan Kumar

Reputation: 40639

You need to give an space to your select child selectors option $("#filters ." + category + " option:selected"), and use multiple in you select element to select multiple values. Try the below snippet for your reference,

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

Upvotes: 1

Related Questions