zoukankan      html  css  js  c++  java
  • 简单的菜单联动

     1 <select name="" id="a">
     2         <option value="">guangdong</option>
     3         <option value="">shenzhen</option>
     4         <option value="">shanghai</option>
     5         <option value="">beijing</option>
     6     </select>
     7     <select id="b">
     8         <option value="">tianhe</option>
     9         <option value="">haizhu</option>
    10         <option value="">yuexiu</option>
    11     </select>
    <script>
    
            var a = document.querySelector("#a");
            var b = document.querySelector("#b");
            var pro = a.children;
            var arr =[
                ["tianhe","haizhu","yuexiu"],
                ["nanshan","futian","longgang"],
                ["pudong","puxi","c"],
                ["chaoyang","haiding","c"]
            ]
            for(var i=0;i<pro.length;i++){
                a.onchange=function(){
                    console.log(a.selectedIndex);
                    // 打印select元素被选的索引值
                    b.innerHTML="";
                    // 为了让每次选择之后,只显示对应数组的值,需要将二级的目录清空
                    for (var i=0;i<arr.length-1;i++) {
                    var str = document.createElement("option");
                        str.innerHTML=arr[a.selectedIndex][i];
                        // 获取被选索引值对应的数组的每一项值
                        console.log(b.children.length)
                        b.appendChild(str);
                    }
                }
            }
        </script>

     

  • 相关阅读:
    我的ORM之六-- 批量
    我的ORM之五-- 事务
    我的ORM之四--删除
    我的ORM之三 -- 更新
    我的ORM之二--添加
    我的ORM之一 -- 查询
    hmailserver
    jquery 插件原则
    C#中 ToString 和 override ToString 的区别
    linq操作符:元素操作符
  • 原文地址:https://www.cnblogs.com/cyany/p/7595177.html
Copyright © 2011-2022 走看看