以下是 jQuery多条件筛选下拉选择框代码js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery多条件筛选下拉选择框代码</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="selectbox">
<div class="selemediv">
<div class="selemenu " >
<span class="sqinput">洛杉矶</span><span class="csinput"></span></div>
<div class="citylist2">
<div class="xzk">
<div class="leibie">商圈</div>
<ul class="shangquan">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
</ul>
</div>
<div class="xzk">
<div class="leibie">城市</div>
<ul class="chengshi">
<li class="active">菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li><li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
</ul>
</div>
</div>
</div>
<div class="selemediv"> <div class="selemenu">请选择金额类型</div>
<DIV class="citylist">
<span>菜单一</span>
<span>菜单二</span>
<span>菜单三</span>
<span>菜单四</span>
</div>
</div>
<div class="selemediv"> <div class="selemenu">请选择金额类型</div>
<DIV class="citylist">
<span>菜单一</span>
<span>菜单二</span>
<span>菜单三</span>
<span>菜单四</span>
</div>
</div>
<div class="selemediv"> <div class="selemenu">请选择金额类型</div>
<DIV class="citylist">
<span>菜单一</span>
<span>菜单二</span>
<span>菜单三</span>
<span>菜单四</span>
</div>
</div>
<div class="selemediv"> <div class="selemenu">请选择金额类型</div>
<DIV class="citylist">
<span>菜单一</span>
<span>菜单二</span>
<span>菜单三</span>
<span>菜单四</span>
</div>
</div>
</div>
<div style="height:500px; color:#fff" id="cs"></div>
<script>
$(".selemenu").click(function(){
$(this).next().slideToggle();
$(this).parents().siblings().find(".citylist,.citylist2").slideUp();
})
$(".citylist span").click(function(){
var text=$(this).text();
$(this).parent().prev().html(text);
$(this).parent().prev().css("color","#666")
$(this).parent().fadeOut();
})
$(".shangquan li").click(function(){
$(".shangquan li").removeClass("active")
$(this).addClass("active")
var text1=$(this).text();
$(".sqinput").html(text1)
})
$(".chengshi li").click(function(){
$(".chengshi li").removeClass("active")
$(this).addClass("active")
var text2=$(this).text();
$(".csinput").html("-"+text2)
$(".citylist2").slideUp();
})
$(function(){
$(document).not($(".selectbox")).click(function(){
$(".citylist,.citylist2").slideUp();
})
$(".selectbox").click(function(event){
event.stopPropagation();
})
})
</script>
</body>
</html>
CSS代码(style.css):
@charset "utf-8";*{margin:0;padding:0;}
.selectbox{height:95px;width:1170px;clear:both;margin:auto;background:#f7f7f7}
.selemediv{width:180px;height:35px;float:left;margin-top:30px;margin-left:30px;position:relative}
.selemenu{width:180px;height:35px;background:#fff;color:#999;text-indent:10px;border:none;background:url(../images/xiala.png) 150px center no-repeat #fff;}
.selemenu{font-size:14px;line-height:35px;}
.citylist span{display:block;clear:both;cursor:pointer;}
.citylist span:hover{background:#eee;}
.citylist{display:none;line-height:35px;background:#fff;text-indent:10px;font-size:12px;position:absolute;left:0;top:35px;width:180px;box-shadow:0px 5px 5px #ccc;}
.citylist2{box-shadow:0px 5px 5px #ccc;;font-size:14px;color:#666;padding:20px 40px;position:absolute;top:35px;left:0;background:#fff;border-bottom:1px solid #f6f6f6;display:none;}
.citylist2 ul{float:left;width:930px;line-height:54px;;}
.citylist2 ul li{float:left;cursor:pointer}
.citylist2 ul li:hover{color:#ff4400}
.citylist2 .shangquan li{width:11%;}
.citylist2 .chengshi li{width:20%;}
.citylist2 .leibie{width:100px;float:left;line-height:54px;}
ul,li{list-style:none;}
.xzk{width:1030px;overflow:hidden;clear:both}
.citylist2 .active{color:#ff4400}
分享到QQ
分享到微博
微信扫一扫
