js实现二级下拉联动

最新推荐文章于 2023-11-05 20:49:09 发布

hai7425

最新推荐文章于 2023-11-05 20:49:09 发布

阅读量703

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript

本文链接：https://blog.youkuaiyun.com/hai7425/article/details/53697941

javaScript 专栏收录该内容

42 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
 
  
<select id="chengshi" onChange="change()">  
   <option selected="selected">上海</option>  
   <option>苏州</option>  
</select>  
  
<select id="quxian">  
   <option selected="selected">浦东新区</option>    
<option>徐汇</option> 
<option>长宁</option> 
<option>普陀</option> 
<option>闸北</option> 
<option>虹口</option> 
<option>杨浦</option> 
<option>黄浦</option> 
<option>卢湾</option> 
<option>静安</option> 
<option>宝山</option> 
<option>闵行</option> 
<option>嘉定</option> 
<option>金山</option> 
<option>松江</option> 
<option>青浦</option> 
<option>南汇</option> 
<option>奉贤</option> 
<option>崇明</option> 

</select>  
  
  
<script>  
function change()  
{  
   var x = document.getElementById("chengshi");  
   var y = document.getElementById("quxian");  
   y.options.length = 0; // 清除second下拉框的所有内容  
   if(x.selectedIndex == 0)  
   {  
        y.options.add(new Option("浦东新区", "0", false, true));  
        y.options.add(new Option("徐汇", "1"));  // 默认选中省会城市 
		y.options.add(new Option("长宁", "2"));
		y.options.add(new Option("普陀", "3"));
		y.options.add(new Option("闸北", "4"));
		y.options.add(new Option("虹口", "5"));
		y.options.add(new Option("杨浦", "6"));
		y.options.add(new Option("黄浦", "7"));
		y.options.add(new Option("卢湾", "8"));
		y.options.add(new Option("静安", "9"));
		y.options.add(new Option("宝山", "10"));
		y.options.add(new Option("闵行", "11"));
		y.options.add(new Option("嘉定", "12")); 
		y.options.add(new Option("金山", "13")); 
		y.options.add(new Option("松江", "14")); 
		y.options.add(new Option("青浦", "15")); 
		y.options.add(new Option("南汇", "16")); 
		y.options.add(new Option("奉贤", "17")); 
		y.options.add(new Option("崇明", "18")); 
	
   }  
  
   if(x.selectedIndex == 1)  
   {  
        y.options.add(new Option("辖张家港市", "0", false, true)); // 辖张家港市、常熟市、太仓市、昆山市、吴江市，吴中区、相城区、平江区、沧浪区、金阊区，以及苏州工业园区和苏州高新区虎丘区。
        y.options.add(new Option("常熟市", "1"));  // 默认选中省会城市  
        y.options.add(new Option("太仓市", "2"));  
		y.options.add(new Option("昆山市", "3"));  
		y.options.add(new Option("吴江市", "4"));  
		y.options.add(new Option("吴中区", "5"));  
		y.options.add(new Option("相城区", "6"));  
		y.options.add(new Option("平江区", "7")); 
		y.options.add(new Option("沧浪区", "8"));  
		y.options.add(new Option("金阊区", "9"));
		y.options.add(new Option("苏州工业园区", "10"));
		y.options.add(new Option("苏州高新区", "11"));
		y.options.add(new Option("虎丘区", "12"));
   }  
  
}  
</script>  
    
</body>  
</html>