<!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 多项筛选和排序
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.