联动菜单

Posted 2021-02-12 zs-book1

在html中下拉菜单项有时我们选中第一个值时，第二个下拉列表的值也会随之变化，例如籍贯选项

　　当我们选中第一个省份的值时，后边城市的列表值都会随之变化为选中省份的城市，具体实现js代码如下：

　　1，我们用一个二维数组来放省份及城市

　　

<script type="text/javascript">
			$(function(){
			var arr=[];
			arr[0]=["苏州","无锡","昆山","徐州"];
			arr[1]=["洛阳","三门峡","郑州","开封"];
			arr[2]=["西安","宝鸡","咸阳","延安"];
			arr[3]=["杭州","宁波","绍兴","温州"];
			arr[4]=["东莞","佛山","惠州","广州"];
			$("#province").change(function(){
				$("#city").empty();
				var val=$(this).val();
				$.each(arr, function(index,sheng) {
					if(index==val){
						$.each(arr[index],function(i,shi){
							var txt=document.createTextNode(shi);
							var op=document.createElement("option");
							$("#city").append(op);
							$(op).append(txt);
						})
					}
				});
			});
			
			});	
		</script>

 2，我们用一个对象来放置省份及城市，具体代码如下

<script>
		$(function(){
　　　　　　　　　　　　　　//创建一个对象，对象格式为 name:value,本例中value的值为一个数组
			var city={"苏州":["苏州","徐州","常州","昆山"],
			　　　　　　"河南":["郑州","开封","洛阳","三门峡"],
			　　　　　　"广东":["东莞","惠州","广州","佛山"]};
　　　　　　　　　　　　　　//当第一个下拉列表的值变化时触发函数
			$("[name=‘sheng‘]").change(function(){
　　　　　　　　　　　　　　　　　　　//获得当前选中的值
				var el=$(this).val();
　　　　　　　　　　　　　　　　　　　//清空第二个下拉列表
				$("[name=‘shi‘]").empty();
　　　　　　　　　　　　　　　　　　　　遍历name为el的对象值
				$(city[el]).each(function(index,item){
　　　　　　　　　　　　　　　　　　　　　　　　//创建文本节点
					var txt=document.createTextNode(item);
　　　　　　　　　　　　　　　　　　　　　　　　//创建元素
					var op=document.createElement("option");
　　　　　　　　　　　　　　　　　　　　　　　　//将元素加入name为shi的元素中
					$("[name=‘shi‘]").append(op);
					　　//为元素添加文本
　　　　　　　　　　　　　　　　　　　　　　　 $(op).append(txt);
				})
			});	
		});	
		</script>

 html文件如下

<table>
			<tr>
				<td>籍贯</td>
				<td>
					<select id="province" name="province">
						<label for=""></label>
						<option value="0">江苏</option>
						<option value="1">河南</option>
						<option value="2">陕西</option>
						<option value="3">浙江</option>
						<option value="4">广东</option>
					</select>
					<select id="city">
						
					</select>
				</td>
			</tr>
			<tr>
				<td>意向工作城市</td>
				<td>
					<select name="sheng">
						<option >苏州</option>
						<option >广东</option>
						<option >河南</option>
					</select>
					<select name="shi">
						
					</select>
				</td>
			</tr>
		</table>