js 实现简单的三级联动

<!DOCTYPE html>
<html>
<meta content="UTF-8" />
<title>三级联动</title>
<body>
	<select name="sheng" id="1">
		<option>请选择省份</option>
	</select>
	<select name="shi" id="2">
		<option>请选择市</option>
	</select>
	<select name="xian" id="3">
		<option>请选择县区</option>
	</select>

<script>
	// 省市区都是随便写的，请别在意
	// 获取所有select
	var selects = document.getElementsByTagName("select");
	// 省下拉下的文字
	var shengStr = "<option>请选择省份</option>";
	// 市下拉下的文字
	var shiStr;
	// 县区下拉下的文字
	var quStr;
	// 记录选择了哪个省（下标）
	var shengIndex = 0;
	// 记录选择了哪个市（下标）
	var shiIndex = 0;
	
	// 省
	var sheng = ["广东省", "北京省", "河北省"];
	// 市
	var shi = [
		["广州市", "惠州市", "佛山市"],
		["北京市"],
		['石家庄市','衡水市']
	];
	// 县区
	var qu = [
		//        广州市               惠州市             佛山市
		[["天河区", "萝岗区"], ["a区", "b区", "c区"], ["d区", "e区"]],
		[["东城区"], ["西城区"]],
		[["长安区","桥东区","桥西区"],["桃城区"]]
	];


	// 遍历省
	for(let i = 0; i < sheng.length; i ++) {
        // 添加option，并将value设置成0、1、2...
		shengStr += "<option value = "+i+">"+sheng[i]+"</option>"
	};
    // 以我这里为例
    /*
    <select name="sheng" id="1">
		<option>请选择省份</option>
        <option value = "0">广东省</option>
        <option value = "1">北京省</option>
        <option value = "2">河北省</option>
	</select>
    */
	selects[0].innerHTML = shengStr;
	// 当选择了省后触发onchange事件
	selects[0].onchange = function () {
		// 首先将市和县区下拉选择重置（如果不设置，当省市区都选择完之后，
        // 后悔了，更改省，然后再点市的时候你会发现很有趣的事情）
		shiStr = "<option>请选择市</option>";
		quStr = "<option>请选择县区</option>";
        // 获取选择的省所在的option的value值(例：如果我选择了北京省，this.value就是1)
		shengIndex = this.value;
		// 判断拿到的shengIndex是不是数字（因为有->请选择省份<-）
		if (!isNaN(shengIndex)) {
			// 拿到选择的省所对应的市数组
			let shiArr = shi[shengIndex];
			// 遍历shiArr
			for (let i = 0; i < shiArr.length; i ++) {
				shiStr += "<option value = "+ i +">"+ shiArr[i] +"</option>"
			}
		}
		selects[1].innerHTML = shiStr;
		selects[2].innerHTML = quStr;
	};
	// 当选择了市后触发onchange事件
	selects[1].onchange = function () {
		quStr = "<option>请选择县区</option>";
		shiIndex = this.value;
		// 判断拿到的shiIndex是不是数字（因为有->请选择省份<-）
		if (!isNaN(shiIndex)) {
			// 拿到选择的市所对应的县区数组
			let quArr = qu[shengIndex][shiIndex];
			// 遍历quArr
			for (let i = 0;i < quArr.length; i ++) {
				quStr += "<option value = "+ i +">"+ quArr[i] +"</option>"
			}
		}
		selects[2].innerHTML = quStr;
	}
</script>
</body>
</html>
js 实现简单的三级联动

猜你喜欢
