妖碧落

导航

js05-省市联动 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var provinces = [
						["深圳","广州","中山","珠海"],
						["长沙","岳阳","郴州","株洲"],
						["武汉","黄冈","黄石","宜昌"]
						]
			
			function selectCity(){
				var province = document.getElementById("sheng")   //得到当前省份
//				alert(province.value) 
				var cities = provinces[province.value]        //城市列表
				
				var citySelect = document.getElementById("city")     //定位到 城市 select
				citySelect.options.length = 0
				for (var i = 0;i<cities.length;i ++) {
					var citytext = cities[i]        // 获取每一个城市
//					alert(citytext)
					var option1 = document.createElement("option")
					var text = document.createTextNode(citytext)
					option1.appendChild(text)
					citySelect.appendChild(option1)
				}
			}
		</script>
	</head>
	<body>		
		籍贯：
		<select id="sheng" onchange="selectCity()">
			<option selected="selected">请选择</option>
			<option value="0">广东省</option>
			<option value="1">湖南省</option>
			<option value="2">湖北省</option>
		</select>
		<select id="city">
			
		</select>
			
		
	</body>
</html>

　　

posted on 2020-06-27 22:18  妖碧落  阅读(93)  评论(0)  编辑  收藏  举报