javascript加html实现简单省市联动

最新推荐文章于 2022-11-16 15:27:06 发布

qq_44723175

最新推荐文章于 2022-11-16 15:27:06 发布

阅读量285

点赞数

本文链接：https://blog.youkuaiyun.com/qq_44723175/article/details/105893238

版权

思路:
1.先写两个下拉选择框，一个是国家，一个是省
2.国家的下拉列表里定义onchange改变事件，事件里写一个add1(this.value)方法，表示当前改变的option里面的value值
3.创建一个二维数组，用来存储国家和城市。每个数组的第一个元素是国家名称，后面的元素是城市名
4.遍历数组，得到每个数组，将数组的第一个元素与传递过来的值进行比较，相同就获取第一个值后面的元素
5.得到city的select，给里面创建option，将第一个值后面的元素写入到option里面
6.添加之前，判断city里面是否有option，有的话删除
<html>
<head>
</head>
<body>
   <select id="country" οnchange="add1(this.value);">
       <option value="0">--请选择--</option>
       <option value="中国">中国</option>
       <option value="德国">德国</option>
       <option value="日本">日本</option>
       <option value="美国">美国</option>
   </select>
   <select id="city">
   </select>
</body>
   <script type="text/javascript">

       var arr=new Array(4);
       arr[0]=["中国","杭州","南京","四川","西安"];
       arr[1]=["德国","慕尼黑","柏林","法兰克福","狼堡"];
       arr[2]=["日本","长岛","大阪","北海道","东京"];
       arr[3]=["美国","华盛顿","纽约","底特律","休斯顿"];
       function add1(val){
       var city1=document.getElementById("city");
       var option=city.getElementsByTagName("option");
       for(var i=0;i<option.length;i++){
           var opt=option[i];
           city1.removeChild(opt);
           i--;
       }
           for(var i=0;i<arr.length;i++){
               var arr1=arr[i];
               var firstvalue=arr1[0];
               if(firstvalue==val){
                   for(var j=1;j<arr1.length;j++){
                       var arr2=arr1[j];
                       //alert(arr2);
                       var opt=document.createElement("option");
                       var text=document.createTextNode(arr2);
                       opt.appendChild(text);
                       city1.appendChild(opt);
                   }
               }
           }
       }
   </script>
</html>