省市联动

最新推荐文章于 2019-05-17 15:04:00 发布

云飞扬°

最新推荐文章于 2019-05-17 15:04:00 发布

阅读量284

点赞数

分类专栏： JavaScript 文章标签：省市联动

本文链接：https://blog.csdn.net/weixin_44706512/article/details/90289382

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

省市联动

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var provinces = [
				["武汉市", "宜昌市", "襄阳市"],
				["深圳市", "广州市", "东莞市"],
				["长沙市", "岳阳市", "湘潭市"],
				["厦门市", "福州市", "泉州市"]
			];

			/*
			 * 1.确定事件
			 */

			function selectProvince() {
				var province = document.getElementById("province");

				//得到当前选中的是哪个省份
				var value1 = province.value;
				//从数组中取出对应的城市信息
				var cities = provinces[value1];

				var citySelect = document.getElementById("city");

				citySelect.options.length = 0;

				for(var i = 0; i < cities.length; i++) {
					var cityText = cities[i];
					//创建option节点
					var option1 = document.createElement("option"); //<option></option>
					//创建城市文本节点
					var textNode = document.createTextNode(cityText);
					//将option节点和文本内容关联起来
					option1.append(textNode);
					//添加到城市的select中
					citySelect.appendChild(option1);

				}
			}
		</script>

	</head>

	<body>
		<!--选择省份-->
		<select onchange="selectProvince()" id="province">
			<option value="-1">--请选择--</option>
			<option value="0">湖北省</option>
			<option value="1">广东省</option>
			<option value="2">湖南省</option>
			<option value="3">福建省</option>
		</select>

		<!--选择城市-->
		<select id="city"></select>

	</body>

</html>