zoukankan      html  css  js  c++  java
  • 添加区域练级联动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <select class="ppp" onchange="provider(this)"></select>
        <select id="city"></select>
    </body>
    <script>
    
            local_data = {"湖北":["武汉","襄阳"],"浙江":["杭州","嘉兴"]};
    
                //获取到父标签
                var pro = document.getElementsByClassName("ppp")[0];
    
                //像标签元素中添加内容
                for (var i in local_data) {
                    //创建标签元素
                    var ele_labs = document.createElement("option");
                    //获取的省级资源,i表示key
                    ele_labs.innerHTML = i;
                    //把资源添加到通过option标签添加到select标签中
                    pro.appendChild(ele_labs);
                }
    
                //this表示的就是当前的标签 select
            function provider(thi) {
                    //thi.options 获取到的当前select下的所有option对象
                    //thi.selectedIndex 获取option下标
                    var sel = thi.options[thi.selectedIndex].innerHTML;
                    //获取城市的父级标签
                     var eles = document.getElementById("city");
                    eles.options.length=0;//先清除上一层触发选择的区域
    
                    for(var i=0;i<local_data[sel].length;i++) {
                        var ops = document.createElement("option");
                        ops.innerHTML=local_data[sel][i];
                        eles.appendChild(ops);
                    }
    
            }
    
    
    </script>
    </html>
  • 相关阅读:
    RHEL6.x 删除Oracle11g
    通过IPV6上QQ及自建IPV6代理的方法
    Carrier frequency and EARFCN
    FDD LTE frequency band allocations
    Cmake参考资料
    sigal & mq_notify
    哈夫曼编码与解码
    哈夫曼数与哈夫曼编码
    算法做题顺序
    我的大学
  • 原文地址:https://www.cnblogs.com/TKOPython/p/12833156.html
Copyright © 2011-2022 走看看