JavaScript之二级联动

最新推荐文章于 2023-05-08 14:18:33 发布

WD-CHINA

最新推荐文章于 2023-05-08 14:18:33 发布

阅读量224

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_44692640/article/details/89480483

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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>

WD-CHINA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之二级联动

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script> // 1.准备数据 var cityInfo = [...
复制链接

扫一扫