如何根据 jquery 中的下拉值过滤 <li>答案

【问题标题】：How to Filter <li> based on drop down values in jquery如何根据 jquery 中的下拉值过滤 <li>
【发布时间】：2015-10-08 11:20:19
【问题描述】：

我需要通过从下拉列表中选择一个选项来过滤小于 5 的列表项

HTML 部分

<div data-role="content">
 <select name="select-choice-1" id="select-choice-1">
     <option value="">select</option>
    <option value="5" >less than 5</option>
    <option value="10" >less than 10</option>
</select>
<div data-role="fieldcontain">    
    <ul data-role="listview">
        <li data-filtertext="4" class="de"><a href=#>Audi</a></li>
        <li data-filtertext="3" class="de"><a href=#>BMW</a></li>
        <li data-filtertext="2" class="it"><a href=#>Ferrari</a></li>
        <li data-filtertext="7" class="it"><a href=#>Lamborghini</a></li>
        <li data-filtertext="9" class="it"><a href=#>Maserati</a></li>
    </ul>
</div>

脚本部分

$('#select-choice-1').change(function(){
var value = $('#select-choice-1').val();
$("ul").find("li").hide()
$("ul").find("li[data-filtertext<"+value+"]").show();

【问题讨论】：

标签： javascript jquery select filter

【解决方案1】：

DEMO

你也可以这样做

$('#select-choice-1').change(function(){
var value = $(this).val();
$("ul").find("li").hide()
    $.each($("ul").find("li"),function(){
    //iterate through each li and check its filtertext value is < value
        if($(this).data('filtertext')<value)
            $(this).show();
    });
});

【讨论】：

工作.. 谢谢@guruprasad
任何时候.. 快乐编码.. :)

【解决方案2】：

您可以使用filter() 来实现：

$('#select-choice-1').change(function() {
    var value = $(this).val();
    $('li').hide().filter(function() {
        return parseInt($(this).data('filtertext'), 10) < parseInt(value, 10);
    }).show();
});

Example fiddle

【讨论】：

【解决方案3】：

$('#select-choice-1').change(function(){
 var value = $('#select-choice-1').val();
 $("ul li").hide();
 $("ul li").each(function(){
   data = $(this).attr('data-filtertext');
   if(typeof data == 'undefined' || data == ''){
      $("ul li").show();
   }else if(data < value){
    $(this).show();
   }
 });    
}

【讨论】：

【解决方案4】：

您可以使用 filter() 来根据条件过滤 jQuery 对象

$('#select-choice-1').change(function() {
  var val = this.value;
  $("ul li").hide().filter(function() {
    return parseInt($(this).data('filtertext'),10) < val;
  }).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-role="content">
  <select name="select-choice-1" id="select-choice-1">
    <option value="">select</option>
    <option value="5">less than 5</option>
    <option value="10">less than 10</option>
  </select>
  <div data-role="fieldcontain">
    <ul data-role="listview">
      <li data-filtertext="4" class="de"><a href=#>Audi</a>
      </li>
      <li data-filtertext="3" class="de"><a href=#>BMW</a>
      </li>
      <li data-filtertext="2" class="it"><a href=#>Ferrari</a>
      </li>
      <li data-filtertext="7" class="it"><a href=#>Lamborghini</a>
      </li>
      <li data-filtertext="9" class="it"><a href=#>Maserati</a>
      </li>
    </ul>
  </div>

【讨论】：