JavaScript之二级联动

本文介绍了一种使用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值