How to Filter <li> based on drop down values in jquery

Question

I need to filter the list item which is less than 5 by selecting a option from the drop down

Html Part

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

Script part

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

Answer 1

You can use filter() for filtering jQuery object based on condition

 $('#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> 

Answer 2

You can use filter() to achieve this:

$('#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

Answer 3

DEMO

You can do this too

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

Answer 4

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