js省市二级联动

最新推荐文章于 2024-03-27 23:32:00 发布

nickrylai

最新推荐文章于 2024-03-27 23:32:00 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： js 省市二级联动

本文链接：https://blog.csdn.net/NickRylai/article/details/51512847

版权

本文介绍了如何使用JavaScript来实现省市二级联动的效果，作者通过搜索和整合网上的资源，提供了一个可供日后复用的示例。

摘要由CSDN通过智能技术生成

最近项目用到省市二级联动，网上搜了半天，例子很多，javascript的，jquery的，都很不错，自己东扒拉点，西扒拉些，整合了一套，写在这里留个demo，方便以后复用。

message.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市二级联动</title>
		<script type="text/javascript" src="js/citySelect.js"></script>
	</head>
	<body>
		<td>			
			<tr class="qiye-option">
					<td id="addressList">
						<select id="province" class="input-select">
										
						</select>
						<select id="city" class="input-select">
										
						</select>
					</td>
			</tr>
		</td>
	<script type="text/javascript">
	     addressInit('province', 'city');  
	</script> 
	</body>
</html>

citySelect.js

var addressInit = function (_provinceList, _cityList, defaultProvince, defaultCity)
{
	var provinceList = document.getElementById (_provinceList);
	var cityList11 = document.getElementById (_cityList);
	
	// 初始化省市标签
	function initSelect (cmb, str)
	{
		for (var i = 0; i < cmb.options.length; i++)
		{
			if (cmb.options[i].value == str)
			{
				cmb.selectedIndex = i;
				return;
			}
		}
	}
	// 添加省、市option公共方法
	function addOption (cmb, str, obj)
	{
		var option = document.createElement ("OPTION");
		cmb.options.add (option);
		option.innerText = str;
		option.value = str;
		option.obj = obj;
	}
	// 改变省的选择时，市跟着变
	function changeProvince ()
	{
		cityList11.options.length = 0;
		cityList11.onchange = null;
		if (provinceList.selectedIndex == -1)
			return;
		var item = provinceList.options[provinceList.selectedIndex].obj;
		for (var i = 0; i < item.c.length; i++)
		{
			addOption (cityList11, item.c[i], item.c[i]);
		}
		initSelect (cityList11, defaultCity);
	}
	
	// 遍历省市列表，将省添加到option
	for (var i = 0; i < cityList.length; i++)
	{
		addOption (provinceList, cityList[i].p, cityList[i]);
	}
	initSelect (provinceList, defaultProvince);
	changeProvince ();
	provinceList.onchange = changeProvince;
}

//省市内容
var cityList = [
        {
            p : "北京",
            c : [
                    "东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区",