前端案例-省市联动

思路分析

1. 准备元素：定义省份与城市的下拉框
2. 绑定事件：绑定省份下拉框的change事件
3. 准备数据：定义数组存放省份数据，定义二维数组存放城市数据
4. 初始化数据：将数组中的省份数据填充到省份下拉框中
5. 下拉框change事件：根据选中的省份数据，得到对应的二维数组中的城市数据，并填充到城市下拉框中
                           创建文件节点     createTextNode()
                           创建元素         createElement()
                           追加子元素         appendChild()

步骤实现

1. 定义省份与城市下拉框的元素
2. 定义省份与城市下拉框所需要的数据(数组与二维数组)
3. 填充省份下拉框的数据
4. 绑定省份下拉框的change事件，得到被选中项的值，与二维数组中的城市对应
5. 通过选中的值(索引)获取二维数组中对应的数组
6. 清空城市下拉框的选中
7. 遍历城市数组的数据，填充城市下拉框的值
8. 创建元素节点，创建文本节点，将文本节点追加到元素节点中
9. 将元素节点追加到城市下拉框中

HTML代码

<div align="center">
		 	 城市：
			 <select id="pro">
				<option value="">请选择</option>
			 </select>
			 <select id="city">
				<option value="">请选择</option>
			 </select>
</div>

JS版本

<script type="text/javascript">
		// 2.定义省份与城市下拉框所需要的数据(数组与二维数组)
		// 省份所需要的数据
		var proList = ["北京市","天津市","河北省","山西省"];
		// 城市下拉框所需要的数据
		var cityList = [
			["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区", "昌平区","大兴区","平谷区","怀柔区","密云县","延庆县"],
			["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","宁河县","静海县","蓟县"],
			["石家庄市","唐山市","秦皇岛市","邯郸市","邢台市","保定市","张家口","承德市","沧州市","廊坊市","衡水市"],
			["太原市","大同市","阳泉市","长治市","晋城市","朔州市","忻州市","吕梁市","晋中市","临汾市","运城市"],
		];
		// 加载省份
		// 3.填充省份下拉框的数据
		for (var i = 0; i < proList.length; i++) {
			// 创建元素节点
			var opt = document.createElement("option");
			// 创建文本节点
			var txt = document.createTextNode(proList[i]);
			// 向option元素中追加文本节点
			opt.appendChild(txt);
			// 设置下拉框对应的value属性
			opt.value = i;
			// 将option元素追加到省份下拉框元素
			document.getElementById("pro").appendChild(opt);
		}
		// 绑定省份下拉框的change事件：当下拉框的选项发生改变时执行的事件
		// 4.绑定省份下拉框的change事件，得到被选中项的值，与二维数组中的城市对应
		document.getElementById("pro").onchange = function () {
			// 清空城市下拉框中的数据
			document.getElementById("city").options.length = 1;
			// 获取下拉框被选中的值
			var index = document.getElementById("pro").value;
			// 判断是否选中指定的省份(index值不为空)
			if (index == "") {
				// 未选中省份，则设置城市为默认的请选择
				document.getElementById("city").innerHTML = '<option value="">请选择</option>';
				return;
			}
			// 获取对应的城市二维数组中对应的数组
			var citys = cityList[index];
			// 遍历城市数组
			for (var i = 0; i < citys.length; i++) {
				// 创建元素节点
				var opt = document.createElement("option");
				// 创建文本节点
				var txt = document.createTextNode(citys[i]);
				// 向option元素中追加文本节点
				opt.appendChild(txt);
				// 将option元素追加到省份下拉框元素
				document.getElementById("city").appendChild(opt);
			}
		}
</script>

jQuery版本

<script type="text/javascript">
		// 全选与全不选
			$("#all").click(function(){
				// 选择所有name属性为ck的复选框
				// 获取头部复选框的状态
				// 设置下面的复选框状态与头部复选框的状态一致  prop()
				$(":checkbox[name = 'ck']").prop("checked",$("#all").prop("checked"));
			})
		// 反选
			// 给反选按钮绑定点击事件
			function CheckNot() {
				// 获取下面所有复选框，设置每个复选框的反状态(选中改为不选中，不选中改为选中)
				$(":checkbox[name = 'ck']").each(function(){
					$(this).prop("checked",!$(this).prop("checked"));
				});
			}
</script>

注意事项

1. 注意数据源：省市联动需要有相应的数据源，可以是静态的数据文件，也可以是通过接口动态获取的数据。确保数据源的准确性和完整性。

2. 注意数据结构：省市联动的数据结构需要符合前端组件的要求，通常是一个嵌套的数组或对象。确保数据结构清晰明了，易于处理和展示。

3. 注意事件绑定：省市联动需要在选择省份或城市时触发相应的事件，更新联动的数据。确保正确绑定事件，并在事件处理函数中更新数据。

4. 注意性能优化：省市联动可能涉及大量的数据操作和DOM操作，需要注意性能优化，避免卡顿和页面加载过慢。可以采用懒加载、节流函数等方法进行性能优化。

运用知识

• 数组操作、条件判断、事件处理、DOM操作等。

应用场景

1. 用户注册或填写个人信息时，需要选择所在的省份和城市。

2. 在电商网站的收货地址管理中，用户需要选择省市来设置或修改收货地址。

3. 在线预订或购买机票、火车票等服务时，用户需要选择出发地和目的地的省市。

4. 在物流查询或订单跟踪中，用户需要选择发货地和收货地的省市。

5. 在地图应用中，用户需要选择所在的省市来定位或搜索相关地点。

案例优化方案

1. 前端筛选：当数据量较大时，可以在前端进行筛选，减少数据量和渲染的复杂度。例如，在选择省份后，只显示该省份下的城市，而不是全部城市。

2. 合并请求：如果省市数据是通过接口获取的，可以将多个请求合并为一个请求，减少请求的次数，提高性能。

3. 压缩和合并资源：将前端的JS和CSS文件进行压缩和合并，减少文件的大小和请求的次数，加快页面加载速度。