简单易懂的jquery版三级联动select

来源：互联网发布：ios本地播放软件编辑：程序博客网时间：2024/05/16 17:55

<!DOCTYPE html><html><head><meta charset=gbk /><title>selectList</title><style type="text/css">    *{margin:0;padding:0;}    .selectList{width:200px;margin:50px auto;}</style><script type="text/javascript" src="jquery1.7.1.js"></script></head><body>    <div class="selectList">        <select class="province">            <option>请选择</option>        </select>        <select class="city">            <option>请选择</option>        </select>        <select class="district">            <option>请选择</option>        </select>    </div>    <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 url = "area.json";            var areaJson;            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();            });            //获取json数据            $.getJSON(url,function(data){                areaJson = data;                province();            });        });    });    </script></body></html>

[    {"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":"迁西县"}        ]}    ]}]

0 0