<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<select id="chooseLine">
<option value="all" selected>全部狀態</option>
<option value="onLine">只要在線</option>
<option value="offLine">只要離線</option>
</select>
<select id="chooseTable">
<option value="all" selected>全部字母</option>
<option value="a">只要a</option>
<option value="b">只要b</option>
</select>
<select id="chooseKm">
<option value="ASC" selected>近距離</option>
<option value="DESC">遠距離</option>
</select>
<div class="item-box">
<div class="item off-line a">
<input type="hidden" value="11" class="item-tag">
<input type="hidden" value="10" class="item-km">
<div>
離線的a，距離10km
</div>
</div>
<div class="item on-line b">
<input type="hidden" value="11" class="item-tag">
<input type="hidden" value="7" class="item-km">
<div>
在線的b，距離7km
</div>
</div>
<div class="item on-line a">
<input type="hidden" value="11" class="item-tag">
<input type="hidden" value="12" class="item-km">
<div>
在線的a，距離12km
</div>
</div>
<div class="item off-line b">
<input type="hidden" value="11" class="item-tag">
<input type="hidden" value="5" class="item-km">
<div>
離線的b，距離5km
</div>
</div>
</div>
</body>
<script src="jquery.min.js"></script>
<script>
//選擇在線離線
$("#chooseLine").change(function()
{
var chooseLine_val = $("#chooseLine option:selected").val();
//隱藏所有標籤
hideAllItem();
//設置隱藏所有item
$(".item-tag").each(function()
{
$(this).val("0"+$(this).val().slice(1,2));
});
//判斷設置顯示item
if("onLine" == chooseLine_val)
{
$(".on-line").each(function()
{
$(this).find(".item-tag").val("1"+$(this).find(".item-tag").val().slice(1,2));
});
}
else if("offLine" == chooseLine_val)
{
$(".off-line").each(function()
{
$(this).find(".item-tag").val("1"+$(this).find(".item-tag").val().slice(1,2));
});
}
else
{
$(".item-tag").each(function()
{
$(this).val("1"+$(this).val().slice(1,2));
});
}
//顯示相關item
showSomeItem();
});
//選擇標籤
$("#chooseTable").change(function()
{
var chooseTable_val = $("#chooseTable option:selected").val();
//隱藏所有item
hideAllItem();
//設置隱藏所有item
$(".item-tag").each(function()
{
$(this).val($(this).val().slice(0,1)+"0");
});
//判斷設置顯示item
if("a" == chooseTable_val)
{
$(".a").each(function()
{
$(this).find(".item-tag").val($(this).find(".item-tag").val().slice(0,1)+"1");
});
}
else if("b" == chooseTable_val)
{
$(".b").each(function()
{
$(this).find(".item-tag").val($(this).find(".item-tag").val().slice(0,1)+"1");
});
}
else
{
$(".item-tag").each(function()
{
$(this).val($(this).val().slice(0,1)+"1");
});
}
//顯示相關item
showSomeItem();
});
//隱藏所有item
function hideAllItem()
{
$(".item-tag").each(function()
{
$(this).parent().hide();
});
}
//顯示相關item
function showSomeItem()
{
$(".item-tag").each(function()
{
if(-1 == $(this).val().indexOf("0"))
{
$(this).parent().show();
$(this).parent().css("display","inline");
}
});
}
//選擇km排序
$("#chooseKm").change(function()
{
var chooseKm = $("#chooseKm option:selected").val();
if("ASC" == chooseKm)
{
var item = $('.item').toArray().sort(function(a,b)
{
return parseInt($(a).find(".item-km").val()) - parseInt($(b).find(".item-km").val());
});
}
else
{
var item = $('.item').toArray().sort(function(a,b)
{
return parseInt($(b).find(".item-km").val()) - parseInt($(a).find(".item-km").val());
});
}
$(item).appendTo('.item-box');
});
</script>
</html>js-css 多項篩選和排序
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章