您的位置：首页 > Web前端 > JavaScript

省市区三级联动效果--城市数据来源百度js文件，无需后台交互

2016-10-17 00:00 821 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>省市区三级联动下拉菜单</title>
</head>
<body>
<style>
.selBoxList{width:100%;margin-top:50px;text-align:center;}
.selBoxList .selSt{min-width:100px;display:inline-block;position:relative;;}
.selBoxList .selSt .current{width:100%;padding:0 10px;font-size:16px;line-height:30px;cursor:pointer;float:left;border:1px solid #ccc;background:#fff;box-sizing: border-box;position:relative;z-index: 2;}
.selBoxList .selSt .box{width:100%;position:absolute;left:0;top:30px;border:1px solid #ccc;max-height:300px;overflow:auto;box-sizing: border-box;display:none;}
.selBoxList .selSt .box span{width:100%;font-size:16px;line-height:30px;cursor:pointer;border-top:1px solid #ccc;float:left;}
.selBoxList .selSt .box span:hover{background:#f1f1f1;}
</style>
<div class="selBoxList">
<span class="selSt selProvince">
<span class="current">--请选择--</span>
<span class="box"></span>
</span>
<span class="selSt selCity">
<span class="current">--请选择--</span>
<span class="box"></span>
</span>
<span class="selSt selArea">
<span class="current">--请选择--</span>
<span class="box"></span>
</span>
</div>
<script language="JavaScript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script language="JavaScript" src="http://passport.baidu.com/js/sitedata_bas.js" charset="GBK"></script>
<script language="JavaScript">

$(document).ready(function(){
//省市区数据
var json_text = arrCity;
(function(){
var Pro = function(p){
for(var i=0;i<p.length;i++){
//打印各个省份对应列表
var option = "<span value='" + p[i].name + "'data-i='" + i + "'>" + p[i].name + "</span>";
$(".selProvince .box").append(option);
$(".selProvince .box span:eq(0)").hide();
}
$(".selCity .current").change(function () {
var ProId = $(".selProvince .box").attr("data-i");
var CityId = $(".selCity .box").attr("data-j");
var selCityValue = $(this).val();
//让区域选项值为默认值
$(".selArea .box").remove();
if(p[ProId].type=="1"){
for(var k=0;k<p[ProId].sub[CityId].sub.length;k++){
var option = "<span value='" + p[ProId].sub[CityId].sub[k].name + "'data-k='" + k + "'>" + p[ProId].sub[CityId].sub[k].name + "</span>";
$(".selArea").append(option);
$(".selArea .box span:eq(0)").hide();
}
}
});
};
Pro(json_text);
$(".selProvince").find(".current").click(function(){
$(".selProvince").find(".box").toggle(0);$(".selCity").find(".box").hide();$(".selArea").find(".box").hide();
});
$(".selCity").find(".current").click(function(){
$(".selCity").find(".box").toggle(0);$(".selProvince").find(".box").hide();$(".selArea").find(".box").hide();
});
$(".selArea").find(".current").click(function(){
$(".selArea").find(".box").toggle(0);$(".selProvince").find(".box").hide();$(".selCity").find(".box").hide();
});
$(".selProvince .box span").each(function(){
$(this).click(function(){
var p = json_text;
var ProId = $(this).attr("data-i");
//让城市选项值为默认值
$(".selCity .box span").remove();
$(".selCity .current").html("--请选择--");
//让区域选项值为默认值
$(".selArea .box span").remove();
$(".selArea .current").html("--请选择--");
$(".selProvince").find(".box").hide();
$(".selProvince").find(".current").html($(this).html());

var selValue = $(this).html();
for (var i = 0; i < p.length; i++) {
if (selValue == p[i].name) {
for (var j = 0; j < p[i].sub.length; j++) {
//打印各个省份对应城市列表
var option = "<span value='" + p[i].sub[j].name + "'data-j='" + j + "'>" + p[i].sub[j].name + "</span>";
$(".selCity .box").append(option);
$(".selCity .box span:eq(0)").hide();
}
}
}
$(".selCity .box span").each(function(){
$(this).click(function(){
//让区域选项值为默认值
$(".selArea .box span").remove();
$(".selArea .current").html("--请选择--");
var p = json_text;
$(".selCity").find(".box").hide();
$(".selCity").find(".current").html($(this).html());
var CityId = $(this).attr("data-j");
var selCityValue = $(this).html();
//让区域选项值为默认值
if(p[ProId].type=="1"){
for(var k=0;k<p[ProId].sub[CityId].sub.length;k++){
var option = "<span value='" + p[ProId].sub[CityId].sub[k].name + "'data-k='" + k + "'>" + p[ProId].sub[CityId].sub[k].name + "</span>";
$(".selArea .box").append(option);
$(".selArea .box span:eq(0)").hide();
}
}
$(".selArea .box span").click(function(){
$(".selArea .box").hide();
$(".selArea .current").html($(this).html());
});
})
});
});
});
})()
});
</script>
</body>
</html>

这是看到的比较好的省市县三级联动方案，直接使用百度的js文件，不需要为城市数据苦恼，后面的维护依靠百度就好了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 省市县三级联动三级联动

相关文章推荐

新的分享

章节导航