<!--省市区街-->
<div class="selectAllArea">
<div class="selectAllChoose">
<dl class="selectssqj select1" style="margin-left: 12px;">
<dt><span class="shengName" data-value="">请选择省份</span><img src="yyimg/up2.png" alt="" class="upOrDownselect"></dt>
<dd>
<ul class="sheng">
<!--<li><a href="#">12131</a></li>-->
</ul>
</dd>
</dl>
<dl class="selectssqj select2">
<dt><span class="shiName" data-value="">请选择城市</span><img src="yyimg/up2.png" alt="" class="upOrDownselect"></dt>
<dd>
<ul class="shi">
</ul>
</dd>
</dl>
<dl class="selectssqj select3">
<dt><span class="quName" data-value="">请选择区域</span><img src="yyimg/up2.png" alt="" class="upOrDownselect"></dt>
<dd>
<ul class="qu">
</ul>
</dd>
</dl>
</div>
<div class="twobtnS">
<a href="#" class="twobtnChoose cancelBtn">取消</a>
<a href="#" class="twobtnChoose sureBtn">确定</a>
</div>
</div>
/*省市区街*/
.selectAllArea{ 568px;border: 1px solid rgba(0,160,233,1);height: 124px;position: fixed;top: 136px;left: 14px;z-index: 20;background: rgba(2,16,45,.8);padding-top: 10px;display: none;}
.selectssqj{position:relative;float:left;margin: 0 5px;}
.selectssqj dt{font-weight: normal;border:1px solid rgba(4,44,80,1); 172px;height: 32px;display:inline-block;line-height: 32px;padding-left:10px;cursor:pointer;padding-right:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;z-index:99;color: #fff;background: rgba(4,44,80,1);border-radius: 4px;}
.selectssqj dt .upOrDownselect{position: absolute;top:12px;right: 10px;}
.selectssqj dt:hover,.selectssqj dt.cur{border:1px solid #409DFE;box-shadow:0 0 3px #409DFE;}
.selectssqj dd{position:absolute;left:0;top:29px;border: 1px solid rgba(0,160,233,1);display:none;background: rgba(4,44,80,1);z-index: 11;}
.selectssqj dd ul{padding: 0; 170px;max-height:250px;overflow:auto;margin-bottom: 0;}
.selectssqj dd ul li a{line-height:28px;display:block;padding:0 8px;color: rgba(255,255,255,.5);}
.selectssqj dd ul li a:hover{background: rgba(35,218,238,.13);color: #fff;}
/*省市区街按钮*/
.twobtnS{ 147px;height: 28px;position: absolute;bottom: 25px;left: 204px;z-index: 10;}
.twobtnS .twobtnChoose{display: block; 60px;height: 26px;line-height: 26px;border-radius:4px;font-size: 14px;color: #fff;text-align: center;}
.twobtnS .twobtnChoose.cancelBtn{float: left;background:rgba(2,17,46,1);border:1px solid rgba(0,160,233,1);}
.twobtnS .twobtnChoose.sureBtn{float: right;background:#00A0E9;border:1px solid rgba(0,160,233,1);}
.twobtnS .twobtnChoose:hover{color: #fff;}
showProvinces(null, 0, 1);
function showProvinces(obj, parentId, regionlevel) {
$.ajax({
type : "post",
dataType : "json",
url : "" + getRootPath() + "/admin/city!list?parentId=" + parentId
+ "®ionlevel=" + regionlevel + "",
success : function(result) {
if (result.success) {
var data = result.cityList;
var htmlStr = "";
for (var i = 0; i < data.length; i++) {
if(regionlevel != 3)
htmlStr += "<li onclick='showProvinces(this, " + data[i].id + ", "+(regionlevel+1)+")' value='" + data[i].id + "' class='selectV'><a class='optionV' href="#" >" + data[i].regionName + "</a></li>";
else
htmlStr += "<li value='" + data[i].id + "' class='selectV'><a class='optionV' href="#" >" + data[i].regionName + "</a></li>";
// console.log(data[i].id)
}
if (regionlevel == 1) {
$(".sheng").html(htmlStr);
$('.shengName').text("请选择省份")
}else if (regionlevel == 2) {
$(".shi").html(htmlStr);
$('.shiName').text("请选择城市")
$('.quName').text("请选择区域")
}else if (regionlevel == 3) {
$(".qu").html(htmlStr);
$('.quName').text("请选择区域")
}
}
var that = $(".select" + regionlevel);
var s=$(that[0]);
var z=parseInt(s.css("z-index"));
var dt=$(that[0]).children("dt");
var dtValue=$(that[0]).children("dt").children("span");
var dd=$(that[0]).children("dd");
var _show=function(){dd.slideDown(200);dt.addClass("cur");s.css("z-index",z+1);}; //展开效果
var _hide=function(){dd.slideUp(200);dt.removeClass("cur");s.css("z-index",z);}; //关闭效果
dt.unbind('click');
dt.bind('click', function(){dd.is(":hidden")?_show():_hide();});
dd.find("a").unbind('click');
dd.find("a").bind('click', function(){
dtValue.html($(this).html());//文本
dtValue.attr("data-value", parentId);//id
console.log(parentId)
_hide();
}); //选择效果（如需要传值，可自定义参数，在此处返回对应的“value”值 ）
$("body").click(function(i){ !$(i.target).parents(".selectssqj").first().is(s) ? _hide():"";});
},
error : function() {
message_box.show('获取数据失败！', 'error');
}
});
}
html demo如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery表单点击滑动下拉框美化 - 站长素材</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-size:12px;background:#efeeeb;color:#666;}
a,a:hover{text-decoration:none; color:#666;}
/* selectssqj */
.selectssqj{position:relative;float:left;margin:0 10px;}
.selectssqj dt{height:28px;display:inline-block;border:1px solid #d2ccc4;background:#fcfcfb url(images/ico.gif) no-repeat 97px center;line-height:28px;font-weight:bold;padding-left:10px;cursor:pointer;90px;padding-right:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;z-index:99;}
.selectssqj dt:hover,.selectssqj dt.cur{border:1px solid #409DFE;box-shadow:0 0 3px #409DFE;}
.selectssqj dd{position:absolute;left:0;top:29px;border:1px solid #d2ccc4;background:#fff;display:none;}
.selectssqj dd ul{padding:4px;104px;max-height:250px;overflow:auto;}
.selectssqj dd ul li a{line-height:28px;display:block;padding:0 8px;}
.selectssqj dd ul li a:hover{background:#f5f5f5;}
</style>
<script type="text/javascript">
$(function(){
$(".selectssqj").each(function(){
var s=$(this);
var z=parseInt(s.css("z-index"));
var dt=$(this).children("dt");
var dd=$(this).children("dd");
var _show=function(){dd.slideDown(200);dt.addClass("cur");s.css("z-index",z+1);}; //展开效果
var _hide=function(){dd.slideUp(200);dt.removeClass("cur");s.css("z-index",z);}; //关闭效果
dt.click(function(){dd.is(":hidden")?_show():_hide();});
dd.find("a").click(function(){dt.html($(this).html());_hide();}); //选择效果（如需要传值，可自定义参数，在此处返回对应的“value”值 ）
$("body").click(function(i){ !$(i.target).parents(".selectssqj").first().is(s) ? _hide():"";});
})
})
</script>
</head>
<body>
<div class="demo">
<dl class="selectssqj">
<dt>请选择省</dt>
<dd>
<ul>
<li><a href="#">12131</a></li>
<li><a href="#">下拉2</a></li>
<li><a href="#">下拉3</a></li>
<li><a href="#">下拉4</a></li>
<li><a href="#">下拉5</a></li>
<li><a href="#">下拉6</a></li>
</ul>
</dd>
</dl>
<dl class="selectssqj">
<dt>请选择市</dt>
<dd>
<ul>
<li><a href="#">12131</a></li>
<li><a href="#">下拉2</a></li>
<li><a href="#">下拉3</a></li>
<li><a href="#">下拉4</a></li>
<li><a href="#">下拉5</a></li>
<li><a href="#">下拉6</a></li>
</ul>
</dd>
</dl>
<dl class="selectssqj">
<dt>请选择区</dt>
<dd>
<ul>
<li><a href="#">下拉1</a></li>
<li><a href="#">下拉2</a></li>
<li><a href="#">下拉3</a></li>
<li><a href="#">下拉4</a></li>
<li><a href="#">下拉5</a></li>
<li><a href="#">下拉6</a></li>
<li><a href="#">下拉1</a></li>
<li><a href="#">下拉2</a></li>
<li><a href="#">下拉3</a></li>
<li><a href="#">下拉4</a></li>
<li><a href="#">下拉5</a></li>
<li><a href="#">下拉6</a></li>
<li><a href="#">下拉1</a></li>
<li><a href="#">下拉2</a></li>
<li><a href="#">下拉3</a></li>
<li><a href="#">下拉4</a></li>
<li><a href="#">下拉5</a></li>
<li><a href="#">下拉6</a></li>
</ul>
</dd>
</dl>
</div>
<br><br><br><br>
<div style="text-align:center;margin:300px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p><br>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>