JS实现三级联动

HTML:

<select id="inne">
			<option value="">请选择省</option>
		</select>
		<select id="int">
			<option value="">请选择市</option>
		</select>
		<select id="inpu">
			<option value="">请选择县</option>
		</select>

JS:

<script>
			let data = [{
					id: 1,
					name: "河南",
					childer: [{
							name: "开封",
							childer: [
								"开封1",
								"开封2",
								"开封3",
								"开封4"
							]
						},
						{
							name: "新乡",
							childer: [
								"新乡1",
								"新乡2",
								"新乡3",
								"新乡4",
							]
						}
					]

				},
				{
					id: 2,
					name: "河北",
					childer: [{
							name: "石家庄",
							childer: [
								"石家庄1",
								"石家庄2",
								"石家庄3",
								"石家庄4",
							]
						},
						{
							name: "衡水",
							childer: [
								"衡水1",
								"衡水2",
								"衡水3",
								"衡水4",
							]
						}
					]
				}, {
					id: 2,
					name: "辽宁",
					childer: [{
							name: "葫芦岛",
							childer: [
								"葫芦岛1",
								"葫芦岛2",
								"葫芦岛3",
								"葫芦岛4",
							]
						},
						{
							name: "锦州",
							childer: [
								"锦州1",
								"锦州2",
								"锦州3",
								"锦州4",
							]
						}
					]
				}
			]



			//获取每个标签
			let inne = document.getElementById('inne');
			let int = document.getElementById('int');
			let inpu = document.getElementById('inpu');
			
			//循环假数据data'
			for (let i = 0; i < data.length; i++) {
				//拼接option
				inne.innerHTML += '<option value="' + i + '">' + data[i].name + '</option>';
			}
			inne.onclick = function() {
				let tp = this.value;
				int.innerHTML = '<option value="">请选择市</option>';
				for (let i = 0; i < data[tp].childer.length; i++) {
					int.innerHTML += '<option value="' + i + '">' + data[tp].childer[i].name + '</option>';
				}
				int.onclick = function() {
					let ts = this.value;
					inpu.innerHTML = '<option value="">请选择县</option>';
					for (let i = 0; i < data[tp].childer[ts].childer.length; i++) {
						inpu.innerHTML += '<option value="">' + data[tp].childer[ts].childer[i] + '</option>';
					}
				}
			}
		</script>

里面的数据大家可以到时候修改一下用了,祝大家学习愉快

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值