选择省份时,自动显示对应省份的城市

  在很多网页中,都会有让用户选择城市的选项,那么,就需要我们用js来实现,当用户选择了省份,自动选择对应省份的城市。

<head>
  <title></title>
  <meta http-equiv="content" content="text/html" charset="utf-8"/>
  <script type="text/javascript">
  var citys =[ ];                             // 定义一个变量来保存省份和城市
  citys["四川"]=["成都","绵阳"];
  citys["湖南"]=["岳阳","长沙"];
  citys["广东"]=["深圳","广州"];
  var selects;
   
   
   
  window.onload=function( ){
  selects = document.forms[0].elements;              // 先找到第一个form对象
  for(var a in citys){
  selects[0].add(new Option(a,a),null);
  }
  fun()
  }
   
   
  function fun(){
  selects[1].length=0;
  var option=selects[0].options[selects[0].selectedIndex];
  var city=citys[option.text];
  for(var i=0;i<city.length;i++){
  selects[1].add(new Option(city[i],city[i]),null);
  }
  }
  </script>
   
  </head>
   
  <body>
  <form>
  <select onclick="fun()"></select>           // 定义一个各省份的选择框
  <select></select>                              //定义一个对应省份所在市的选择框
  </form>
  </body>
  </html>

        首先用js实现当用户点击第一个的时候,对应的选择框进行城市的跳转,并清除之前选择的城市。


    学习js重要的是在坚持,虽然,开始接触的时候,都觉得挺难的,但要理解实现的功能和每段代码所要实现的功能。

 

posted @ 2015-05-31 09:36  书童730  阅读(1543)  评论(0编辑  收藏  举报