1 Replies - 248 Views - Last Post: 12 June 2017 - 09:10 AM

#1 benyates1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 12-June 17

Filtering between range of two dropdown field values with jQuery

Posted 12 June 2017 - 02:47 AM

I have two drop down menus (min age and max age). I can filter on both them but individually but what I want to be able to do is only show the divs whose data-age attribute is equal or within the range of both values (21 to 26 for example would return 22 etc but not 20 or 27).

<div class="col-xs-6">
                        <div class="form-group">
                            <label class="filter-col" style="margin-right:0;" for="pref-perpage">Min Age</label>
                            <select id="age-min" class="form-control">
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                            </select>                                
                        </div> <!-- form group [rows] -->
                        </div>

                        <div class="col-xs-6">
                        <div class="form-group">
                            <label class="filter-col" style="margin-right:0;" for="pref-perpage">Max Age</label>
                            <select id="age-max" class="form-control">
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                            </select>                                
                        </div> <!-- form group [rows] -->
                        </div>

                        <script type="text/javascript">
                          $("#age-min").change(function(){
                              if (this.value === 'all') {
                                $("div[data-age]").show();
                              } else {
                                $("div[data-age]").hide();
                                $("div[data-age=" + this.value +"]").show();
                              }
                            });
                        </script>


Is This A Good Question/Topic? 0
  • +

Replies To: Filtering between range of two dropdown field values with jQuery

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1836
  • View blog
  • Posts: 5,784
  • Joined: 15-January 14

Re: Filtering between range of two dropdown field values with jQuery

Posted 12 June 2017 - 09:10 AM

Which part are you having a problem with? Your filter function should get the values of both dropdowns and go from there, what is it doing now?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1