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

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>selectList</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .selectList{200px;margin:50px auto;}
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="area.js"></script>
    <style type="text/css">
        .selectList select{
            float:left;
        }
    </style>
    </head>
    <body>
        <div class="selectList">
            <select class="province">
                <option>请选择</option>
            </select>
            <select class="city">
                <option>请选择</option>
            </select>
            <select class="district">
                <option>请选择</option>
            </select>
        </div>
        <script type="text/javascript">
        $(function(){
            $(".selectList").each(function(){
                var temp_html;
                var oProvince = $(this).find(".province");
                var oCity = $(this).find(".city");
                var oDistrict = $(this).find(".district");
                //初始化省
                var province = function(){
                    $.each(areaJson,function(i,province){
                        temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";
                    });
                    oProvince.html(temp_html);
                    city();
                };
                //赋值市
                var city = function(){
                    temp_html = ""; 
                    var n = oProvince.get(0).selectedIndex;
                    $.each(areaJson[n].c,function(i,city){
                        temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";
                    });
                    oCity.html(temp_html);
                    district();
                };
                //赋值县
                var district = function(){
                    temp_html = ""; 
                    var m = oProvince.get(0).selectedIndex;
                    var n = oCity.get(0).selectedIndex;
                    if(typeof(areaJson[m].c[n].d) == "undefined"){
                        oDistrict.css("display","none");
                    }else{
                        oDistrict.css("display","inline");
                        $.each(areaJson[m].c[n].d,function(i,district){
                            temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>";
                        });
                        oDistrict.html(temp_html);
                    };
                };
                //选择省改变市
                oProvince.change(function(){
                    city();
                });
                //选择市改变县
                oCity.change(function(){
                    district();
                });
                 province();
            });
        });
        </script>
    </body>
    </html>
    


    area.js

    var areaJson=
    [
        {"p":"请选择",
        "c":[
            {"ct":"请选择",
            "d":[
                {"dt":"请选择"},
            ]}
        ]},
        {"p":"江西省",
        "c":[
            {"ct":"南昌市",
            "d":[
                {"dt":"西湖区"},
                {"dt":"东湖区"},
                {"dt":"高新区"}
            ]},
            {"ct":"赣州市",
            "d":[
                {"dt":"瑞金县"},
                {"dt":"南丰县"},
                {"dt":"全南县"}
            ]}
        ]},
        {"p":"北京",
        "c":[
            {"ct":"东城区"},
            {"ct":"西城区"}
        ]},
        {"p":"河北省",
        "c":[
            {"ct":"石家庄",
            "d":[
                {"dt":"长安区"},
                {"dt":"桥东区"},
                {"dt":"桥西区"}
            ]},
            {"ct":"唐山市",
            "d":[
                {"dt":"滦南县"},
                {"dt":"乐亭县"},
                {"dt":"迁西县"}
            ]}
        ]}
    ]
    
  • 相关阅读:
    在SQLite中使用索引优化查询速度
    SQLite支持的SQL数据操作
    left (outer) join , right (outer) join, full (outer) join, (inner) join, cross join 区别
    深入理解Android内存管理原理(六)
    Merge Sorted Array
    Sort Colors
    Construct Binary Tree from Preorder and Inorder Traversal
    Binary Tree Postorder Traversal
    Symmetric Tree
    Rotate Image
  • 原文地址:https://www.cnblogs.com/makan/p/4807164.html
Copyright © 2011-2022 走看看