javascript的下拉菜单

谁借莪１个温暖的怀抱￠ 2022-08-21 08:56 182阅读 0赞

<!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" xml:lang="zh-cn">  
<head>  
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
<title>网页标题</title>  
<meta name="keywords" content="关键字列表" />  
<meta name="description" content="网页描述" />  
<link rel="stylesheet" type="text/css" href="" />  
<style type="text/css"></style>  
  
</head>  
<body>  
  
省份：<select id="province"></select>  
城市：<select id="city"><option>请选择省/城市</option></select>  
</body>  
</html>  
<script type="text/javascript">  
//先创建出两个省份和城市两个数组  
var arr\_province = \["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省","河南省"\];  
var arr\_city = \[  
\["请选择城市/地区"\],  
\["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"\],  
\['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'\],  
\['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘沽区', '开发区'\],  
\['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'\],  
\['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'\],  
\['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'\],  
\['郑州市'\]  
   \];  
//获得下拉框省份的id  
   var pro\_obj =document.getElementById("province");  
var len =pro\_obj.length=arr\_province.length;  
//遍历获取option.text的内容  
for(var i=0;i<len;i++)\{  
pro\_obj.options\[i\].text=arr\_province\[i\];  
\}  
//获得下拉框城市的id  
pro\_obj.onchange =function ()\{  
     
  //获得省份所选择的option的下标  
   var city\_obj =document.getElementById("city");  
   var city\_ind =pro\_obj.selectedIndex;  
   var city\_len =city\_obj.length =arr\_city\[city\_ind\].length;  
  
//遍历  
for(var j =0 ;j<city\_len;j++)\{  
//记住别忘了text  
city\_obj.options\[j\].text=arr\_city\[city\_ind\]\[j\];  
  
\}   
\}

</script>

效果图如下

![Center][]

![Center 1][]

[Center]: /images/20220724/12b21aac16a74c759deff3f26bfb8105.png
[Center 1]: /images/20220724/bea75f29207442758fe0af63e32267b0.png