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

最新推荐文章于 2024-10-02 09:04:21 发布

weixin_33834910

最新推荐文章于 2024-10-02 09:04:21 发布

阅读量453

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/sprouting/blog/759291

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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文件，不需要为城市数据苦恼，后面的维护依靠百度就好了

转载于:https://my.oschina.net/sprouting/blog/759291