jquery省市区三级(二级)联动

最新推荐文章于 2024-07-29 11:49:07 发布

望月狼

最新推荐文章于 2024-07-29 11:49:07 发布

阅读量1.3k

点赞数

文章标签： jquery function input server json html

<head runat="server">
    <title></title>
    <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select id="province">
            <option value="0">请选择省份</option>
        </select>
        <select id="city">
            <option value="0">请选择城市</option>
        </select>
        <select id="district">
            <option value="0">请选择区县</option>
        </select>
        <!--下列为初始值(可选,编辑表单时设置)-->
        <input type="hidden" value="440000" id="pre_province" />
        <input type="hidden" value="440500" id="pre_city" />
        <input type="hidden" value="440511" id="pre_district" />
    </div>
    </form>
</body>

/*

description: 省市区三级(二级)联动
*/
$(function () {
    var citySelector = function () {
        var province = $("#province");
        var city = $("#city");
        var district = $("#district");
        var preProvince = $("#pre_province");
        var preCity = $("#pre_city");
        var preDistrict = $("#pre_district");
        var jsonProvince = "/js/json-array-of-province.js";
        var jsonCity = "/js/json-array-of-city.js";
        var jsonDistrict = "/js/json-array-of-district.js";
        var hasDistrict = true;
        var initProvince = "<option value='0'>请选择省份</option>";
        var initCity = "<option value='0'>请选择城市</option>";
        var initDistrict = "<option value='0'>请选择区县</option>";
        return {
            Init: function () {
                var that = this;
                that._LoadOptions(jsonProvince, preProvince, province, null, 0, initProvince);
                province.change(function () {
                    that._LoadOptions(jsonCity, preCity, city, province, 2, initCity);
                });
                if (hasDistrict) {
                    city.change(function () {
                        that._LoadOptions(jsonDistrict, preDistrict, district, city, 4, initDistrict);
                    });
                    province.change(function () {
                        city.change();
                    });
                }
                setTimeout(function () {
                    province.change();
                }, 500);
            },
            _LoadOptions: function (datapath, preobj, targetobj, parentobj, comparelen, initoption) {
                $.get(
                datapath,
                function (r) {
                    var t = ''; // t:    html容器 
                    var s;      // s:    选中标识 
                    var pre;    // pre:  初始值
                    if (preobj === undefined) {
                        pre = 0;
                    } else {
                        pre = preobj.val();
                    }
                    for (var i = 0; i < r.length; i++) {
                        s = '';
                        if (comparelen === 0) {
                            if (pre !== "" && pre !== 0 && r[i].code === pre) {
                                s = ' selected=\"selected\" ';
                                pre = '';
                            }
                            t += '<option value=' + r[i].code + s + '>' + r[i].name + '</option>';
                        }
                        else {
                            var p = parentobj.val();
                            if (p.substring(0, comparelen) === r[i].code.substring(0, comparelen)) {
                                if (pre !== "" && pre !== 0 && r[i].code === pre) {
                                    s = ' selected=\"selected\" ';
                                    pre = '';
                                }
                                t += '<option value=' + r[i].code + s + '>' + r[i].name + '</option>';
                            }
                        }

                    }
                    if (initoption !== '') {
                        targetobj.html(initoption + t);
                    } else {
                        targetobj.html(t);
                    }
                },
                "json"
                );
            }
        };
    } ();
    citySelector.Init();
});

json数据：

http://download.csdn.net/detail/dongdong0000856989/4414214