动态下拉列表例子

最新推荐文章于 2019-02-26 17:01:00 发布

iteye_2555

最新推荐文章于 2019-02-26 17:01:00 发布

阅读量114

点赞数

分类专栏： javascript 文章标签： HTML

javascript 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!-- saved from url=(0022)http://internet.e-mail -->
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<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>
            <OPTION VALUE="甘肃省">甘肃省 </OPTION>
         </SELECT>
        <SELECT NAME="city">
          <OPTION VALUE="0">请选择所在城市 </OPTION>
         </SELECT>
     </FORM>
</BODY>
 </HTML>