三级联动效果的实现技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38409767/article/details/99971894

本文介绍了实现三级联动效果的三种方法，包括使用JavaScript、jQuery和Vue.js进行操作。通过这些方法，可以有效地处理复杂的选择交互，实现下拉菜单间的依赖联动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
    window.onload = function(){
     var cities = [
      [],
      [{"name":"武汉市","value":101},{"name":"黄冈市","value":102},{"name":"襄阳市","value":103},{"name":"孝感市","value":104},],
      [{"name":"长沙市","value":101},{"name":"黄冈市","value":102},{"name":"襄阳市","value":103},{"name":"孝感市","value":104},],
      [{"name":"南京市","value":101},{"name":"黄冈市","value":102},{"name":"襄阳市","value":103},{"name":"孝感市","value":104},],
    
     ]


//找到name为cities的元素，保存在变量中，一遍后续修改
var selCit = document.getElementsByName("cities")[0];
console.log(selCit);
//为name为provs的元素绑定内容改变就会触发的函数onchange事件
//select对象有个属性：selectedIndex（当前元素选中那一项的下标位置）
console.log(document.getElementsByName("provs"[0]));
document.getElementsByName("provs")[0].onchange = function(){
	//在改变之前，让市的下拉边框变空：
	  selCit.innerHTML = ""
	  //创建一个文档碎片
		var frag = document.createDocumentFragment();
		//在选择了省份以后，不直接显示市，而是先显示"--请选择--"
		frag.appendChild(new Option("--请选择--",""))
	//获取当前的provs选中的下标
	var i= this.selectedIndex;
	//获得cities数组中i位置的子数组
	var cts = cities[i];
	//如果cts的长度为0；
	if(cts.length ==0 ){
      //如果省份的选择为空，就把市的下拉边框隐藏
      selCit.style.display = "none"
	}else{
         selCit.style.display = "inline-block"
		for(var c = 0 ; c<cts.length ; c++){
			var opt = new Option(cts[c].name,cts[c].value);
			frag.appendChild(opt);
		}
		selCit.appendChild(frag);
	}
}

    }
	</script>

</head>
<body>
	<select name = "provs">
	<option value="0">-请选择-</option>
	<option value="1">湖北省</option>

	<option value="2">湖南省</option>

	<option value="3">江苏省</option>

	</select>

	<select name="cities">
	</select>
</body>
</html>

方法二：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script type="text/javascript">
			var optio = new Array();
			optio["湖北省"] = [12, 32, 47, 879];
			optio["湖南省"] = [10, 20, 20, 20, 8];
			optio["江苏省"] = [115, 21, 21, 21, 81];
			optio["河南省"] = [15, 25, 26, 26, 87];

			function chang() {
				document.getElementById("cit").options.length = 0;
				var sf = document.getElementById("sele").value;
				for(var i = 0; i < optio[sf].length; i++) //空格很重要
				{
					document.getElementById("cit").add(new Option(optio[sf][i], optio[sf][i]));
				}
			}

			
		</script>
	</head>

	<body>
		<select onclick="chang()" id="sele">
			<option>湖北省</option>
			<option>江苏省</option>
			<option>四川省</option>
			<option>湖南省</option>
		</select>
		<select id="cit">
			<option>12</option>
			<option>32</option>
			<option>47</option>
			<option>879</option>
		</select>
		<br /><br />
		<select onclick="change()" id="selet">
			<option>江苏省</option>
			<option>湖北省</option>
			<option>四川省</option>
			<option>湖南省</option>
		</select>
		<select id="city">
			<option>123</option>
			<option>323</option>
			<option>473</option>
			<option>879</option>
		</select>
	</body>

</html>

方法三：

<head>
	<meta charset="UTF-8">
	<title></title>

	<script type="text/javascript">
		var optio = new Array();
		optio["湖北省"] = [12, 32, 47, 879];
		optio["湖南省"] = [10, 20, 20, 20, 8];
		optio["江苏省"] = [115, 21, 21, 21, 81];
		optio["河南省"] = [15, 25, 26, 26, 87];
		
		function change() {
			var opt = document.getElementById("selet").value;
			var cit = document.getElementById("city"); //找到option的索引
			cit.options.length = 0
			switch(opt) {
				case "江苏省":
					cit.add(new Option("123","123"));
					//方法 new Option（A，B）中的两个参数，一个代表文本（text），一个代表值（value）；
					cit.add(new Option( "323", "323"));
					break;
				case "湖北省":
					cit.add(new Option("903", "903"));
					cit.add(new Option("034", "034"));
					break;
				case "四川省":
					cit.add(new Option("35314", "35314"));
					cit.add(new Option("45323", "45323"));
					break;
				case "湖南省":
					cit.add(new Option("134", "134"));
					cit.add(new Option("3", "3"));
					break;

			}
		}
	</script>
</head>

<body>
	<select onclick="chang()" id="sele">
		<option>湖北省</option>
		<option>江苏省</option>
		<option>四川省</option>
		<option>湖南省</option>
	</select>
	<select id="cit">
		<option>12</option>
		<option>32</option>
		<option>47</option>
		<option>879</option>
	</select>
	<br /><br />
	<select onclick="change()" id="selet">
		<option>江苏省</option>
		<option>湖北省</option>
		<option>四川省</option>
		<option>湖南省</option>
	</select>
	<select id="city">
		<option>123</option>
		<option>323</option>
		<option>473</option>
		<option>879</option>
	</select>
</body>

两级联动实现的三种方法