省市区三级联动

HTML

所属省：
            <span class="select-box inline">
                <select id="Select1" size="1" style=" 100Px">
                    <option value="0">请选择</option>
                </select>
            </span>
                所属市：
            <label class="select-box inline">
                <select id="Select2" name="CityID" style=" 100Px">
                    <option value="0">请选择</option>
                </select></label>
                所属区：
            <label class="select-box inline">
                <select id="Select3" name="AreID" style=" 100Px">
                    <option value="0">请选择</option>
                </select></label>

Javascrip

//转换参数为“参数1|参数2|参数3...”的形式
//arjun ajax 页面函数调用形式
function encodeAjaxParam() {
    var str = "";
    for (var i = 0; i < arguments.length; i++) {
        str += arguments[i] + "|";
    }
    if (str != "") {
        str = str.substring(0, str.length - 1);
    }
    return str;
}
var proid = parseInt('$!ProID', 0); //获取后台输出的省Id
var cityid = parseInt('$!CityID', 0); //获取后台输出的市Id
var areaid = parseInt('$!AreaID', 0); //获取后台输出的区县Id
function GetProvinceList() {
    $("#Select1").html("<option value="0">请选择</option>");
    $("#Select2").html("<option value="0">请选择</option>");
    $("#Select3").html("<option value="0">请选择</option>");
    jQuery.post("/AJAX/ajax_handlerNew.ashx", {
        fn: "GetAreaByParentId",
        param: encodeAjaxParam(0)
    },
    function(data) {
        var json = new Function("return " + data)();
        var option = "<option value="0">请选择</option>";
        for (var i = 0; i < json.length; i++) {
            var AreaID = json[i].AreaID;
            var AreaName = json[i].AreaName;
            option += "<option value="" + AreaID + "">" + AreaName + "</option>"
        }
        $("#Select1").html(option);
        $("#Select1").val(proid);
        if (proid > 0) {
            GetCityList();
        }
    });
}
function GetCityList() {

    $("#Select2").html("<option value="0">请选择</option>") $("#Select3").html("<option value="0">请选择</option>");
    var ParentId = $("#Select1").val();
    if (ParentId == 0) {
        return;
    }
    jQuery.post("/AJAX/ajax_handlerNew.ashx", {
        fn: "GetAreaByParentId",
        param: encodeAjaxParam(ParentId)
    },
    function(data) {
        var json = new Function("return " + data)();
        var option = "<option value="0">请选择</option>";
        for (var i = 0; i < json.length; i++) {
            var AreaID = json[i].AreaID;
            var AreaName = json[i].AreaName;
            option += "<option value="" + AreaID + "">" + AreaName + "</option>"
        }
        $("#Select2").html(option);
        $("#Select2").val(cityid);
        if (cityid > 0) {
            GetAreaList();
        }

    });
}
function GetAreaList() {
    $("#Select3").html("<option value="0">请选择</option>") var ParentId = $("#Select2").val();
    if (ParentId == 0) {
        return;
    }
    jQuery.post("/AJAX/ajax_handlerNew.ashx", {
        fn: "GetAreaByParentId",
        param: encodeAjaxParam(ParentId)
    },
    function(data) {
        var json = new Function("return " + data)();
        var option = "<option value="0">请选择</option>";
        for (var i = 0; i < json.length; i++) {
            var AreaID = json[i].AreaID;
            var AreaName = json[i].AreaName;
            option += "<option value="" + AreaID + "">" + AreaName + "</option>"
        }
        $("#Select3").html(option);
        $("#Select3").val(areaid);
    });
}
$(function() {
    GetProvinceList();
    $("#Select1").change(function() {
        GetCityList();
    });
    $("#Select2").change(function() {
        GetAreaList();
    });
});

C#

        protected void GetAreaByParentId(string ParentId)
        {
            int _ParentId = int.Parse(ParentId);
            EBookServer_Home.SystemBase.Sys_Area bllArea = new EBookServer_Home.SystemBase.Sys_Area();
            List<EBookServer_Model.SystemBase.Sys_AreaInfo> modellist = bllArea.GetListByFatherID(_ParentId);
            var list = modellist.Select(a => new
            {
                a.AreaID,
                a.AreaName,
                a.Spell,
                a.SpellAbb,
                isChilderNum = bllArea.IsParentId(a.AreaID)
            }).OrderByDescending(a => a.isChilderNum);
            string json = Newtonsoft.Json.JsonConvert.SerializeObject(list);
            HttpContext.Current.Response.Write(json);
        }