JavaScript之二级联动

最新推荐文章于 2022-09-28 19:29:07 发布

WD-CHINA

最新推荐文章于 2022-09-28 19:29:07 发布

阅读量307

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_44692640/article/details/89480483

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态生成省市区级联选择器的方法，通过解析预定义的省市数据，自动创建下拉菜单，并实现了当省份选择发生变化时，相应城市列表更新的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		// 1.准备数据
		var cityInfo = [{
				"province": "河南省",
				"cites": ["郑州市", "洛阳市", "开封市", "南阳市"]
			},
			{
				"province": "河北省",
				"cites": ["石家庄市", "邯郸市", "保定市", "承德市"]
			},
			{
				"province": "山东省",
				"cites": ["济南市", "青岛市", "泰安市", "日照市"]
			}
		]
		// 创建省份select
		provinceS = document.createElement('select')

		for (var i = 0; i < cityInfo.length; i++) {
			var province = cityInfo[i]
			opt = document.createElement('option')
			opt.innerText = province.province
			provinceS.appendChild(opt)
		}
		document.body.appendChild(provinceS)



		// 创建城市Select
		var cityS = document.createElement('select')
		// 遍历第一个省份中的城市列表
		for (var i = 0; i < cityInfo[0].cites.length; i++) {
			var city = cityInfo[0].cites[i]
			var opt = document.createElement('option')
			opt.innerText = city
			cityS.appendChild(opt)
		}
		document.body.appendChild(cityS)


		// onchange事件  当选项发生改变时			
		provinceS.onchange = function() {

			var province = cityInfo[provinceS.selectedIndex]
			var cites = province.cites
			cityS.innerHTML = ''
			for (var i = 0; i < cites.length; i++) {
				var newOpt = document.createElement('option')
				city = cites[i]
				newOpt.innerText = city
				cityS.appendChild(newOpt)
			}
			showResult()

		}
		cityS.onchange = showResult
		var h3 = document.createElement('h3')
		function showResult(){
			var province = cityInfo[provinceS.selectedIndex].province
			var city = cityInfo[provinceS.selectedIndex].cites[cityS.selectedIndex]
			h3.innerText = province + ": " + city
		}
		showResult()
		document.body.appendChild(h3)
		
	</script>
</html>