随笔-75  评论-74  文章-35  trackbacks-1
动态下拉列表例子
  1.  <!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.0 Transitional//EN" >   
  2.  <HTML>   
  3. <HEAD>   
  4. <TITLE> New Document </TITLE>   
  5. <META NAME= "Generator"  CONTENT= "EditPlus" >   
  6. <META NAME= "Author"  CONTENT= "" >   
  7.  <META NAME= "Keywords"  CONTENT= "" >   
  8. <META NAME= "Description"  CONTENT= "" >   
  9. <script language= "JavaScript"  type= "text/javascript" >   
  10.      //定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组   
  11.     var city=[   
  12.     [ "北京" , "天津" , "上海" , "重庆" ],   
  13.      [ "南京" , "苏州" , "南通" , "常州" ],   
  14.     [ "福州" , "福安" , "龙岩" , "南平" ],   
  15.      [ "广州" , "潮阳" , "潮州" , "澄海" ],   
  16.     [ "兰州" , "白银" , "定西" , "敦煌" ]   
  17.     ];   
  18.   
  19.     function getCity(){   
  20.          //获得省份下拉框的对象   
  21.         var sltProvince=document.form1.province;   
  22.          //获得城市下拉框的对象   
  23.          var sltCity=document.form1.city;   
  24.           
  25.          //得到对应省份的城市数组   
  26.         var provinceCity=city[sltProvince.selectedIndex -  1 ];   
  27.   
  28.          //清空城市下拉框，仅留提示选项   
  29.         sltCity.length= 1 ;   
  30.   
  31.          //将城市数组中的值填充到城市下拉框中   
  32.          for (var i= 0 ;i<provinceCity.length;i++){   
  33.             sltCity[i+ 1 ]= new  Option(provinceCity[i],provinceCity[i]);   
  34.        }   
  35.     }   
  36.  </script>   
  37.  </HEAD>   
  38.     
  39.  <BODY>   
  40.  <FORM METHOD=POST ACTION= ""  name= "form1" >   
  41.          <SELECT NAME= "province"  onChange= "getCity()" >   
  42.             <OPTION VALUE= "0" >请选择所在省份 </OPTION>   
  43.             <OPTION VALUE= "直辖市" >直辖市 </OPTION>   
  44.            <OPTION VALUE= "江苏省" >江苏省 </OPTION>   
  45.             <OPTION VALUE= "福建省" >福建省 </OPTION>   
  46.             <OPTION VALUE= "广东省" >广东省 </OPTION>   
  47.             <OPTION VALUE= "甘肃省" >甘肃省 </OPTION>   
  48.          </SELECT>   
  49.         <SELECT NAME= "city" >   
  50.           <OPTION VALUE= "0" >请选择所在城市 </OPTION>   
  51.          </SELECT>   
  52.      </FORM>   
  53. </BODY>   
  54.  </HTML> 
posted on 2008-04-02 22:58 影子 阅读(82) 评论(0)  编辑  收藏 所属分类: 学习笔记

只有注册用户登录后才能发表评论。
网站导航:
Powered by: 博客园 模板提供：沪江博客 Copyright ©2024 影子