联动菜单

Posted zs-book1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了联动菜单相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于联动菜单的主要内容,如果未能解决你的问题,请参考以下文章

省市区县街道四级联动下拉菜单

asp有两个下拉菜单,是二级联动菜单

省市区三级菜单联动插件

JS二级联动下拉菜单,把第二个菜单里的值传出

ComboBox,三级联动菜单,新入门点小白,有些代码有待优化,大神勿喷

联动菜单