黑马程序员技术交流社区

标题: 下拉列表实例 [打印本页]
作者: suichuan689    时间: 2015-8-31 08:25
标题: 下拉列表实例
<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml_07.html</title>
       
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
         <select id="select1" onchange="relation(this.value);">
                 <option>--请选择--</option>
                 <option value="中国">中国</option>
                 <option value="美国">美国</option>
                 <option value="俄罗斯">俄罗斯</option>
                 <option value="德国">德国</option>
                 <option value="日本">日本</option>
         </select>   
         
         <select id="select2">
                
         </select>
  </body>
  
  <script type="text/javascript">
                  var arr=new Array(5);
                  arr[0]=["中国","北京","上海","深圳","广州","武汉","南京"];
                  arr[1]=["美国","纽约","华盛顿","休斯顿","洛杉矶","芝加哥"];
                  arr[2]=["俄罗斯","莫斯科","阿德马","奥伦堡","叶卡捷琳堡","圣彼得堡"];
                  arr[3]=["德国","柏林","法兰克福","汉诺威","科隆","杜塞尔多夫"];
                  arr[4]=["日本","东京","北海道","广岛","长崎","大阪"];
                  var select1=document.getElementById("select1");
                  var select2=document.getElementById("select2");
                  function relation(val){
                          var opss=select2.getElementsByTagName("option");
                          if(opss.length>0){
                                  for(var k=0;k<opss.length;k++){
                                            select2.removeChild(opss[k]);
                                            k--;
                                          }
                          }
                         
                          for(var i=0;i<arr.length;i++){
                                  var arr1=arr[i];
                                  if(arr1[0]==val){
                                          for(var j=1;j<arr1.length;j++){
                                                  var ops=document.createElement("option");
                                                  var textNode=document.createTextNode(arr1[j]);
                                                  ops.appendChild(textNode);
                                                  select2.appendChild(ops);
                                          }
                                  }
                          }
                         
                  }
  
  </script>
</html>




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2