省市联动

最新推荐文章于 2025-09-06 08:01:57 发布

转载最新推荐文章于 2025-09-06 08:01:57 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dayingying520/p/10438544.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用JavaScript实现的省份与城市联动下拉选择器。该选择器通过预定义的省份和城市数组，在用户选择省份时自动更新城市列表，提供了一个实用的网页交互组件。

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta charset="utf-8" />

<script language="JavaScript" type="text/javascript">
   //定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
   var city=[
   ["南京","镇江","丹阳","苏州"],
   ["阜阳","合肥","芜湖","宿州"],
   ["太原","唐山","邯郸","秦皇岛"],
   ["威海","日照","潍坊","菏泽"]
   ];

   function getCity(){
     //获得省份下拉框的对象
     var sltProvince=document.form1.province;
     //获得城市下拉框的对象
     var sltCity=document.form1.city;
     //得到对应省份的城市数组
     var provinceCity=city[sltProvince.selectedIndex - 1];

     //清空城市下拉框，仅留提示选项
     sltCity.length=1;

     //将城市数组中的值填充到城市下拉框中
     for(var i=0;i<provinceCity.length;i++){
       sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
     }
   }
</script>
</HEAD>

<BODY>
<FORM METHOD=POST ACTION="" name="form1">
     <SELECT NAME="province" onChange="getCity()">
       <OPTION VALUE="0">请选择省份 </OPTION>
       <OPTION VALUE="江苏省">江苏省 </OPTION>
       <OPTION VALUE="安徽省"> 安徽省</OPTION>
       <OPTION VALUE="河北省">河北省 </OPTION>
       <OPTION VALUE="山东省"> 山东省</OPTION>
     </SELECT>
     <SELECT NAME="city">
       <OPTION VALUE="0">请选择城市 </OPTION>
     </SELECT>
   </FORM>
</BODY>
</HTML>