使用两个下拉输入获取JavaScript进行过滤

debugcn 发表于 Dev

d辉煌

我有2个下拉列表来过滤列表。截至目前，它仅使用了下拉菜单中最后一次使用的过滤器。我希望他们一起工作，以便有人单击“几周”下拉列表，显示所有与该课程相关的信息，然后单击“锻炼”下拉列表，并对其进行更多过滤。

$('select').change(function() {
    var current = this.value;

    if (current == 'all') {
      $('#FilterContainer').find('li.all').show();
    } else {

      $('#FilterContainer').find('li').hide();
      $('#FilterContainer').find('li.all.' + current).show();
    }

    return false;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p align="center"><font face="futura" size="20px">Pick your workout here:</font>
</p>
<div align="center">
  <select style="font-size:20px" class="filterby">
    <option value="">
      <h5>Select Week</h5>
    </option>
    <option value="1">
      <h5>Week 1</h5>
    </option>
    <option value="2">
      <h5>Week 2</h5>
    </option>
    <option value="3">
      <h5>Week 3</h5>
    </option>
    <option value="4">
      <h5>Week 4</h5>
    </option>
  </select>

  <select style="font-size:20px" class="filterby">
    <option value="">
      <h5>Select Workout</h5>
    </option>
    <option value="sw1">
      <h5>Strength Workout #1</h5>
    </option>
    <option value="sw2">
      <h5>Strength Workout #2</h5>
    </option>
    <option value="cw1">
      <h5>Conditioning Workout #3</h5>
    </option>
    <option value="cw2">
      <h5>Conditioning Workout #4</h5>
    </option>
    <option value="rw">
      <h5>Recovery Workout</h5>
    </option>
  </select>
</div>
<div id="FilterContainer">
  <ul>
    <li class=" all 1 sw1" style="list-style:none; display:none">saasasasa
     
</div>
</li>
</ul>
</div>
<script>
  $('select').change(function() {
    var current = this.value;

    if (current == 'all') {
      $('#FilterContainer').find('li.all').show();
    } else {

      $('#FilterContainer').find('li').hide();
      $('#FilterContainer').find('li.all.' + current).show();
    }

    return false;
  });
</script>

gurvinder372

为您创建了一个小提琴http://jsfiddle.net/gurvinder372/whz4Lj6u/1/

$('select').change(function() {
  
  	var filterbyWeekSelection = $.trim( $( "select[data-type='filterbyWeek']" ).val() );
  	var filterbyWorkoutSelection = $.trim( $( "select[data-type='filterbyWorkout']" ).val() );
  
   //$('#FilterContainer').find('li.all.' + current).show();
    //var current = this.value;

   if (filterbyWeekSelection.length == 0 || filterbyWorkoutSelection || 0 )  {
      $('#FilterContainer').find('li.all').show();
    } 
  else 
  {
      $('#FilterContainer').find('li.' + filterbyWeekSelection + "." + filterbyWorkoutSelection).show();
  }

    return false;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p align="center"><font face="futura" size="20px">Pick your workout here:</font>
</p>
<div align="center">
  <select style="font-size:20px" class="filterby" data-type='filterbyWeek'>
    <option value="">
      <h5>Select Week</h5>
    </option>
    <option value="1">
      <h5>Week 1</h5>
    </option>
    <option value="2">
      <h5>Week 2</h5>
    </option>
    <option value="3">
      <h5>Week 3</h5>
    </option>
    <option value="4">
      <h5>Week 4</h5>
    </option>
  </select>

  <select style="font-size:20px" class="filterby" data-type='filterbyWorkout'>
    <option value="">
      <h5>Select Workout</h5>
    </option>
    <option value="sw1">
      <h5>Strength Workout #1</h5>
    </option>
    <option value="sw2">
      <h5>Strength Workout #2</h5>
    </option>
    <option value="cw1">
      <h5>Conditioning Workout #3</h5>
    </option>
    <option value="cw2">
      <h5>Conditioning Workout #4</h5>
    </option>
    <option value="rw">
      <h5>Recovery Workout</h5>
    </option>
  </select>
</div>
<div id="FilterContainer">
  <ul>
    <li class=" all 1 sw1" style="list-style:none; display:none">saasasasa
     
</li>
</ul>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。