二级联动

来源:互联网 发布:ipad 在线视频软件 编辑:程序博客网 时间:2024/04/27 17:20

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

 <HTML> 

 <HEAD> 

 <TITLE> 二级联动 </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> 

原创粉丝点击