WEB前端

jquery+div ul li+css多选 如条件多选

位置:首页 > WEB前端 > jquery教程,2018-02-28 18:26
jquery+div ul li+css多选 如条件多选,像一般的商城筛选商品条件时经常用到,淘宝,天猫等都有

jquery+div ul li+css多选(图0)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
		<title>jquery+div ul li+css实现多选 如条件多选</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

$(function () {



$("#suaibumen li").bind("click", function(){

if($(this).hasClass("cur")){
 $(this).removeClass("cur");
}
else{
$(this).addClass("cur");
}
var va="";
$("#suaibumen li").each(function (index, element) {
if($(this).hasClass("cur")){
 va=va+$(this).attr("name")+",";
 }
});
$("#shistr").val(va);


});







}); 

</script>
 <style>
 .xuankl{width:80px;height:40px;line-height:40px;float:left;text-align:right;}
 
 .xuank{float:left;width:400px;margin-top:5px;}

.suaibumen li{float:left;height:25px;line-height:25px;text-align:center;cursor:pointer;
border:1px dashed #eee;color:#3e3c3c;overflow:hidden;width:100px;margin:2px;}         
.suaibumen li.cur{
border:1px dashed #014b92;color:#014b92;}         
.suaibumen li:hover{
color:#ff0000;}   
 </style>
</head>
<body>
<div style="margin-bottom:30px;">
<div class="xuankl">服务城市:</div>
<div class="xuank">
<input type="hidden" id="shistr" name="shistr" value=""/>
<ul class="suaibumen" id="suaibumen">
<li id="shili314" name="314">南宁</li>
 
<li id="shili315" name="315">柳州</li>
 
<li id="shili316" name="316">桂林</li>
 
<li id="shili317" name="317">梧州</li>
 
<li id="shili318" name="318">北海</li>
 
<li id="shili319" name="319">防城港</li>
 
<li id="shili320" name="320">钦州</li>
 
<li id="shili321" name="321">贵港</li>
 
<li id="shili322" name="322">玉林</li>
 
<li id="shili323" name="323">贺州</li>
 
<li id="shili324" name="324">百色</li>
 
<li id="shili325" name="325">河池</li>
 
<li id="shili477" name="477">崇左</li>
 
<li id="shili478" name="478">来宾</li>

<div style="clear:both"></div>
</ul>
</div>
<div style="clear:both"></div>
</div>
 </body>
</html>



TAGS:jquery+div ul li+css多选

上编:jquery mouseover 连续执行问题

下编:没有了

猜你喜欢


NewHot手机版