省市联动JQ封装比较简洁调用的方法

前言

因为省市联动的需求在每个项目几乎存在，所以本人也对此在web页面通过封装比较简洁的JQ方法循环判断调用调用后台获取数据再绑定到Select表单上。如果对代码有什么疑问或者更好办法可以在评论区留言。

HTML代码

        <select id="Province" name="Province">
                    <option selected="selected">--请选择--</option>
                </select>
                <select id="City" name="City">
                    <option selected="selected">--请选择--</option>
                </select>
                <select id="Distinct" name="Distinct">
                    <option selected="selected">--请选择--</option>
                </select>

JQ代码

    //省市联动
    getAreaInfo("Province", 1, "中国");
    //点击选择按钮改变触发事件
    $("#Province").change(function () {
        if ($("#Province option:selected").text() != "--请选择--") {
            getAreaInfo("City", 2, $("#Province option:selected").text());
        }
    });
    $("#City").change(function () {
        if ($("#City option:selected").text() != "--请选择--") {
             getAreaInfo("Distinct", 3, $("#City option:selected").text());
         }
    });

//绑定省市联动
function getAreaInfo(id, LevelID, PreName) {

    $.getJSON("/User/UserAreaSelect", { "LevelID": LevelID, "PreName": PreName }, function (data) {
        if (data != null) {
            var str = '<option>--请选择--</option>';
            for (var i = 0; i < data.length; i++) {
                str += '<option value="' + data[i].AreaCode + '">' + data[i].AreaName + '</option>';
            }

            $("#"+id).html(str);
        }
    })
}

后台代码是异步返回所需的json数据