当当当当，虽然很晚了，而且健身房也关门了，索性就留下来继续把这个写出来。

好的，下面还是老样子，先上效果：

jquery 下拉框触发click 两次 jquery下拉框联动_jquery

首先页面上只有第一个输入框有内容，下面两个都是空的，没有任何数据

当我点击第一个选择框选择内容后

第二个选择框就会加载出相应的省内各市的数据，当然了，为了模拟下数据，只写了两个，同时第三个选择框会加载相应市区信息

当我第二个选择框内容发生改变时，第三个选择框数据也会相应发生改变

最后当我改变省选择框为省外或者请选择时，清空市区选择框所有内容

下面上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>用户中心</title>
	<style>
		#cont {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.sele {
			width:10rem;
			height: 2.1429rem;
			margin: 2rem 0; 
			text-indent: 3rem;
		}
	</style>
	<script src="./js/jquery-3.3.1.min.js"></script>

</head>
<body>
	<div id="cont">
		<!-- select1 -->
		<select class="sele" id="province">
			<option value="0">请选择</option>
			<option value="1">浙江省</option>
			<option value="2">省外</option>
		</select>
		<!-- select2 -->
		<select class="sele" id="city">
			
		</select>
		<!-- select3 -->
		<select class="sele" id="area">
			
		</select>

	</div>

	
	<script>
		var city = [ '温州市','杭州市'];
		var area = [
			[ '永嘉县', '鹿城区', '龙湾区', '瓯海区'],
			['滨江', '下沙', '海曙', '余杭']
		]
		// 监听省选择框
		$('#cont #province').change(() => {
			var val = $('#cont .sele').val();
			if(val == 1) {
				// 向市选择框添加city内容
				for(let i = 0; i < city.length; i++) {
					var dom = '<option value="' + city[i] + '">' + city[i] + '</option>'
					$('#city').append(dom);
				}

				// 初始化市区加载
				for(let j = 0; j < area[0].length; j++) {
					var ddom = '<option value="' + area[0][j] + '">' + area[0][j] + '</option>' 
					$('#area').append(ddom)
				}


				// 给每个option选项再添加change事件进行监听
				$('#city').change(() => {
						
						// 先清空区域选择框内容
						$('#area').empty();
						// 向区域选择框添加内容
						// 获取当前select值的数组下标
						var i = city.indexOf($('#city').val());
						console.log(i)
						// 向市区选择框中添加内容
						for(let j = 0; j < area[i].length; j++) {
							var ddom = '<option value="' + area[i][j] + '">' + area[i][j] + '</option>' 
							$('#area').append(ddom)
						}
					})
				
				
			}else {
				// console.log('0')
				// 清空所有选择框内容
				$('#city').empty();
				$('#area').empty();
			}

		});

	</script>

</body>
</html>

相应的备注代码里面都有，这次写的算是相对比较全的了，不过还是多啰嗦几句吧

老样子上关键代码：

1.         $('#cont #province').change(() => {

2.                 $('#city').change(() => {

3.                         var i = city.indexOf($('#city').val());
4.                         $('#area').empty();

好了讲思路：

first of all, 为省选择框添加change事件，

in addition, 如果省选择框为浙江省内，则加载相应市区内容，否则让市区选择框内容全部清空，即empty()

what's more, 为市区选择框添加change监听事件，当其内容发生改变时，先获取市的index值，然后将对应的市区数组内容添加在市区选择框里。只有获取值后才能添加其对应市区数组的内容。

emmm，差不多了，可以回去了，顺便给室友一个差评，等我个博客居然坐不住了...虽然确实写得蛮久的