js省市区级联选择联动

发表于:2015-08-14 11:19:40 | 阅读数:--次| 作者:js,javascript
摘要：省市区级联选择省份: 城市: 县区
1 <!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>省市区级联选择</title>
    <script type="text/javascript" src="/Content/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/Content/js/public.js"></script>
    <style type="text/css">
        body, html, ul {
            margin: 0px;
            padding: 0px;
        }

        #AreaList {
            list-style-type: none;
        }

            #AreaList li {
                float: left;
                line-height: 30px;
                height: 30px;
                margin-right: 5px;
            }
    </style>
</head>
<body>
    <ul id="AreaList">
        <li>省份:<select name="Provice" id="Provice">
    <option value="-1">请选择</option>
</select></li>
        <li>城市:<select name="City" id="City">
    <option value="-1">请选择</option>
</select></li>
        <li>县区:<select name="Town" id="Town">
    <option value="-1">请选择</option>
</select></li>
        <li><span id="Msg"></span></li>
    </ul>
    <script type="text/javascript">
        var url = "/Pages/Hander/GetAreaTown.ashx";
        $(document).ready(function () {
            BindOption("Provice", { "flag": "Areas", "Area_ID": 0 }, function () {
                var areaCodes = "";
                if (areaCodes != "") {
                    loadProvice(areaCodes);
                }
            });

            $("#Provice").change(function () {
                BindOption("City", { "flag": "Areas", "Area_ID": $("#Provice").val() });
                $("#City").trigger("change");
            });

            $("#City").change(function () {
                BindOption("Town", { "flag": "Areas", "Area_ID": $("#City").val() });
                $("#Town").trigger("change");
            });

            $("#Town").change(function () {
                var values = { "Provice": { name: $("#Provice option:selected").text(), value: $("#Provice").val() }, "City": { name: $("#City option:selected").text(), value: $("#City").val() }, "Town": { name: $("#Town option:selected").text(), value: $("#Town").val() } };
                //alert(values.Provice.name + ":" + values.Provice.value + "||" + values.City.name + ":" + values.City.value + "||" + values.Town.name + ":" + values.Town.value);
                if (parent.areaChanger)
                    parent.areaChanger.call(this, values);
            });

        });

        /**
        *==========================
        ****加载数据***
        *==========================
        *@para Ajax请求参数
        *@id：需要绑定的下拉框ID
        *@fn：回调函数
        */
        function BindOption(id, para, fn) {
            $("#" + id).empty();
            $("#" + id).append("<option value=\"-1\">请选择</option>");
            if (para.Area_ID != "-1") {
                changLoader(true, "Msg");
                getAjax(url, para, function (data) {
                    if (data.success) {
                        var list = data.data, opt = "";
                        for (var i = 0; i < list.length; i++) {
                            opt += "<option value=\"" + list[i]['Area_ID'] + "\">" + list[i]['Area_Name'] + "</option>";
                        }
                        $("#" + id).append(opt);
                    }
                    changLoader(false, "Msg");
                    if (fn)
                        fn.call(this);
                });
            }
        }

        /**
        *==========================
        ****加载数据***
        *==========================
        *@codeStr 城市区域字符串例如:13,1303,130603依次是ProviceID,CityID,TownID
        *@author：叶明龙
        *@time：2014/06/09
        */
        function loadProvice(codeStr) {
            var datas = codeStr.split(",");
            $("#Provice").val(datas[0]);
            BindOption("City", { "flag": "Areas", "Area_ID": datas[0] }, function () {
                $("#City").val(datas[1]);
            });
            BindOption("Town", { "flag": "Areas", "Area_ID": datas[1] }, function () {
                $("#Town").val(datas[2]);
            });

        }

    </script>
</body>
</html>
js省市区级联选择联动

Provice.zip
