zoukankan      html  css  js  c++  java
  • 三级联动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三级联动</title>
        <script src="../day10/jquery-1.8.3.js"></script>
    </head>
    <body>
        <!---->
        <select name="" id="sheng">
            <option value="">--请选择省--</option>
        </select>
        <!---->
        <select name="" id="shi">
            <option value="">--请选择市--</option>
        </select>
        <!-- 县/区 -->
        <select name="" id="xian">
            <option value="">--请选择区县--</option>
        </select>
        <script>
            // 定义数据 省和市关系
            var S={};
            S['河北省']=['石家庄','承德'];
            S['山东']=['青岛','烟台'];
            S['河南']=['郑州','安阳'];
            // 定义市和县的关系
            var s={};
            s['石家庄']=['正定','藁城','桥西'];
            s['承德']=['兴隆','隆华'];
            s['青岛']=['市南','市北','崂山'];
            s['烟台']=['芝罘','福山'];
            s['郑州']=['金水','上街'];
            s['安阳']=['文峰','林州'];
    
            var str='<option value="">--请选择省--</option>';
            //遍历省的随想拿到对象里面的键  写入select
            for(i in S){
                // console.log(i);
                str+='<option value="' + i + '">'+i+'</option>';
            }
            // console.log(str);
            $('#sheng').html(str);
    
            // 给省绑定change()事件
            $('#sheng').change(function(){
                var str1='<option value="">--请选择市--</option>';
                // console.log($(this).val());
                // 获取当前选中选项的value值 value对应市
                var Val=$(this).val();
                //通过索引回去对应的值(市)
                // console.log(S[Val]);
                for(i in S[Val]){
                    var Index=S[Val][i];
                    // console.log(Index);
                    str1+='<option value="'+Index+'">'+Index+'</option>';
                }
                // 将拼接好的数据写入市里
                $('#shi').html(str1);
            })
    
            $('#shi').change(function(){
                var str2='<option value="">--请选择区县--</option>';
                // console.log($(this).val());
                // 获取当前选中选项的value值 value对应县
                
                var Val=$(this).val();
                //通过索引回去对应的值(县)
                // console.log(S[Val]);
                for(i in s[Val]){
                    var Index=s[Val][i];
                    // console.log(Index);
                    str2+='<option value="'+Index+'">'+Index+'</option>';
                }
                // 将拼接好的数据写入县里
                $('#xian').html(str2);
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    第44月第9天 iOS开发-illegal text-relocation错误解决
    第44月第8天 高可用 zookeeper
    第44月第7天 bitcode 生成各机型的包
    第44月第6天 iOS静态库冲突 framework瘦身
    第44月第5天 VMware centos7并配置网络 git-for-windows
    第44月第2天 解决MySQL报错:1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column 'informat
    第43月第29天 rtp分包
    第43月第28天 libyuv裁剪
    label不换行的问题
    解决scrollview不滚动
  • 原文地址:https://www.cnblogs.com/lyxdw/p/8908793.html
Copyright © 2011-2022 走看看