省市区三级下拉选择器

最新推荐文章于 2023-09-25 14:01:23 发布

向上爬的蜗牛

最新推荐文章于 2023-09-25 14:01:23 发布

阅读量3k

点赞数 5

分类专栏： web前端文章标签：省市区选择

本文链接：https://blog.csdn.net/abld99/article/details/51094864

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

省市区的选择插件非常常见，网上的相关内容也特别的多，网上的东西常常会因为多而乱，找到一款适合的省市区插件总是免不了要费一番功夫。

省市区插件的关键在于数据的准确性和精炼程度，当我从网上down了一个省市区的json文件后，发现里面有几个冗余的字段和很多空白，在网页上利用正则将很多不必要的数据给清除掉了，json数据由原来的200多KB缩小至100KB左右，在使用的过程中我发现有些地方只有省市二级，缺乏第三级可能会导致使用的时候用户无法进行选择，在判断表单的时候就会发生错误，因此专门将不存在区(县)级的增加一个与市同名的区级。

city.js中包含省市区三个数组：provinceList、cityList、districtList

<html>
<head>
	<title>省市区三级联动</title>
	<meta charset="UTF-8">
	<style>
		select{width:150px;height:25px;}
	</style>
</head>

<body>
<div class="addr">
		<h2>您的城市</h2>
		<select class="selectStyle" id="provinceNode"><option value="0">请选择</option></select>
		<select class="selectStyle" id="cityNode"><option value="0">请选择</option></select>
		<select class="selectStyle" id="districtNode"><option value="0">请选择</option></select>
</div>
<script src="jquery-1.9.1.min.js"></script>
<script src="city.js"></script>
<script>
(function(){
	//省市区下拉框初始化
	var len = provinceList.length;
	var pStr = '<option value="0">请选择</option>';
	for(i=0;i<len;i++){
		obj = provinceList[i];
		pStr = pStr + '<option value="'+obj.ProID+'">'+obj.ProName+'</option>';
	}
	$("#provinceNode").html(pStr);
	$("#provinceNode").change(function(){
		var v = $(this).val();
		var len = cityList.length;
		var obj = null,cityStr = '<option value="0">请选择</option>';
		for(var i=0;i<len;i++){
			obj = cityList[i];
			if(v==obj.ProID){
				cityStr = cityStr + '<option value="'+obj.CityID+'">'+obj.CityName+'</option>';
			}
		}
		$("#cityNode").html(cityStr);
		$("#cityNode").change();
	});
	$("#cityNode").change(function(){
		var v = $(this).val();
		var len = districtList.length;
		var obj = null,dStr = '<option value="0">请选择</option>';
		for(var i=0;i<len;i++){
			obj = districtList[i];
			if(v==obj.CityID){
				dStr = dStr + '<option value="'+obj.CityID+'">'+obj.DisName+'</option>';
			}
		}
		$("#districtNode").html(dStr);
		$("#districtNode").change();
	});
})();
</script>
</body>
</html>

下载DEMO

向上爬的蜗牛

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
省市区三级下拉选择器

省市区的选择插件非常常见，网上的相关内容也特别的多，网上的东西常常会因为多而乱，找到一款适合的省市区插件总是免不了要费一番功夫。省市区插件的关键在于数据的准确性和精炼程度，当我从网上down了一个省市区的json文件后，发现里面有几个冗余的字段和很多空白，在网页上利用正则将很多不必要的数据给清除掉了，json数据由原来的200多KB缩小至100KB左右，在使用的过程中我发现有些地方只有省市二级
复制链接

扫一扫