JavaScript实现联动效果

偏执的太偏执、 2022-07-12 06:17 249阅读 0赞

用JavaScript实现菜单的联动是非常常见的效果，写了一个小例子，模拟一下菜单联动，二级的，很简单

<!DOCTYPE html>
    <html>
    <head>
    <title>js联动.html</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    
    
    </head>
    
    <body>
    	<select id="province" οnchange="selectProvince()">
    		<option>请选择省</option>
    		<option>河南</option>
    		<option>新疆</option>
    		<option>山东</option>
    		<option>河北</option>
    	</select>省
    	<select id="city">
    		<option>请选择市</option>
    	</select>市
    </body>
    <script>
    	function selectProvince() {
    		var city = new Array();
    		city[0]= new Array("周口","南阳","郑州");
    		city[1]=new Array("乌鲁木齐","昌吉","阿克苏","哈密");
    		city[2]=new Array("济南","泰安","东营");
    		city[3]=new Array("石家庄");
    
    		var province = document.getElementById("province").value;
    		var city1=document.getElementById("city");
    		if(province =="河南"){

city1.length=1;//每次选择之前都要清空二级菜单的选择框
    			for(var i=0;i<city[0].length;i++){
    				city1.options.add(new Option(city[0][i],city[0][i]));
    			}
    		}
    		if(province =="新疆"){

city1.length=1;
    			for(var i=0;i<city[1].length;i++){
    				city1.options.add(new Option(city[1][i],city[1][i]));
    			}
    		}
    		if(province =="山东"){

city1.length=1;
    			for(var i=0;i<city[2].length;i++){
    				city1.options.add(new Option(city[2][i],city[2][i]));
    			}
    		}
    		if(province =="河北"){

city1.length=1;
    			for(var i=0;i<city[3].length;i++){
    				city1.options.add(new Option(city[3][i],city[3][i]));
    			}
    		}
    	}
    </script>
    </html>

注意： city1.length=1;如果不加这行代码，当你选择了一次以上时，二级菜单就会包含你选过的所有的选项，所有一定要加上

![Image 1][]

[Image 1]: