[英]How to Filter <li> based on drop down values in jquery
我需要通過從下拉列表中選擇一個選項來過濾小於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();
您可以使用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>
您可以使用filter()
實現此目的:
$('#select-choice-1').change(function() {
var value = $(this).val();
$('li').hide().filter(function() {
return parseInt($(this).data('filtertext'), 10) < parseInt(value, 10);
}).show();
});
你也可以這樣做
$('#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();
});
});
$('#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();
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.