前端js-----三级联动

js_0">效果如下（原生js）：

在这里插入图片描述 ------
HTML：

<body>
		请选择省份
		<select name="" id="province">
			<option value="请选择省份">请选择省份</option>
		</select>
		请选择市
		<select name="" id="cities">
			<option value="请选择市">请选择市</option>
		</select>
		请选择区
		<select name="" id="shiqu">
			<option value="请选择市">请选择区</option>
		</select>
	</body>

JS：

javascript">var province = new Array();
		var cities = new Array();
		province['河北省'] = ['石家庄', '保定', '邯郸', '邢台', '张家口'];
		province['北京市'] = ['东城', '西城', '宣武', '海淀', '崇文'];
		//console.log(province['河北省'][0]);
		cities['石家庄'] = ['裕华区','东区','西区','南区'];
		cities['保定'] = ['雄安新区','东区','西区','南区'];
		//console.log(cities['石家庄'][1]);

		var oProvince = document.querySelector('#province');
		var oCities = document.getElementById('cities');
		var shiqu=document.getElementById('shiqu');
		//console.log(typeof province['河北省']);
		for (var k in province) {
			// console.log(k);
			// console.log(province[k]);
			oProvince.add(new Option(k, k), null);
		}

		oProvince.onchange = function() {
			//清空市级下拉菜单
			oCities.length = 1;
			//点了河北省控制台会获得河北省   点了北京市会获得北京市
			//console.log(oProvince.value);
			var oSelect = oProvince.value; //获取选中的省份值
			for (var k in province[oSelect]) {
				//console.log(province[oSelect][k]);
				oCities.add(new Option(province[oSelect][k], province[oSelect][k]), null)
			}
		}
		
		for(var k in cities){
			// console.log(k);
			// console.log(cities[k]);
			oCities.add(new Option(k,k),null);
		}
		oCities.onchange=function(){
			shiqu.length = 1;
			//console.log(111);
			//console.log(oCities.value);
			var oSelects = oCities.value;
			
			for (var k in cities[oSelects]) {
				console.log(cities[oSelects][k]);
				shiqu.add(new Option(cities[oSelects][k], cities[oSelects][k]), null)
			}
		}