Asp.Net下，基于Jquery的Ajax二级联动

最近做一个项目，要求实现二级联动效果。背景为：通过学院的选择，联动出专业选项。起初想直接用微软的控件实现Ajax效果，但是DropDownList控件会自动触发PostBack，在后台根本就不好控制，所以抛弃这种方案，用Jquery实现Ajax效果。直接上代码，简单直观。

1.前端页面（这里给出页面二级联动示意，分别为两个select）

<select name="xsxy" id="xsxy">
    <option>-- 请选择学院名称 --</option>
</select>
<select name="xszy" id="xszy">
    <option>-- 请选择专业名称 --</option>
</select> 

2.所对应Jquery代码

$(function () {
        //ajax加载 注意路径,专业的post参数和学院有所不同，注意
        $.post("../../handler/XyZyHandler.ashx", { "action": "getxydata" }, function (data, status) {
            if (status != "success") {
                $("#xsxy").append("<option>加载学院出错</option>");
            }
            else if (data == "nodata") {
                $("#xsxy").append("<option>暂时没有数据</option>");
            }
            else {
                var options = $.parseJSON(data);
                for (var i = 0; i < options.length; i++) {
                    var option = options[i];
                    $("#xsxy").append("<option value=‘" + option.opvalue + "‘>" + option.optext + "</option>"); //注意这里的option写法
                }
            }
        });

        //当学院改变时，实现专业的联动
        $("#xsxy").change(function () {

            $.post("../../handler/XyZyHandler.ashx", { "action": "getzydata", "xyid": $(this).val() }, function (data, status) {

                if (status != "success") {
                    $("#xszy").append("<option>加载专业出错</option>");
                }
                else if (data == "nodata") {
                    $("#xszy").append("<option>暂时没有数据</option>");
                }
                else {
                    $("#xszy").empty();
                    $("#xszy").append("<option>-- 请选择专业名称 --</option>")
                    var options = $.parseJSON(data);
                    for (var i = 0; i < options.length; i++) {
                        var option = options[i];
                        $("#xszy").append("<option value=‘" + option.opvalue + "‘>" + option.optext + "</option>");
                    }

                }

            });

        });

3.其对应的ashx文件

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string action = context.Request["action"];
            Xyzygl xzgl = new Xyzygl();
            //处理学院
            if (action == "getxydata")
            {
                DataTable result = xzgl.Xyzygl_Getxy();   

                if (result.Rows.Count == 0)
                {
                    context.Response.Write("nodata");
                }
                else
                {
                    List<OptionContent> list = new List<OptionContent>();
                    for (int i = 0; i < result.Rows.Count; i++)
                    {
                        string xymc = result.Rows[i]["xymc"].ToString();
                        string xyid = result.Rows[i]["xyid"].ToString();

                        list.Add(new OptionContent() { opvalue = xyid, optext = xymc });

                    }

                    //这里利用json处理更加的灵活，注意在添加数据的时候要以对象的方式，并且以属性的方式表示数据，这样前台在利用数据时就会更简单
                    JavaScriptSerializer jss = new JavaScriptSerializer();
                    context.Response.Write(jss.Serialize(list));

                }
            }
            else if (action == "getzydata")
            {
                string xyid = context.Request["xyid"];
                DataTable result = xzgl.Xyzygl_Getzy(xyid);
                if (result.Rows.Count == 0)
                {
                    context.Response.Write("nodata");
                }
                else
                {
                    List<OptionContent> list = new List<OptionContent>();
                    for (int i = 0; i < result.Rows.Count; i++)
                    {
                        string zymc = result.Rows[i]["zymc"].ToString();
                        string zyid = result.Rows[i]["zyid"].ToString();

                        list.Add(new OptionContent() { opvalue = zyid, optext = zymc });

                    }

                    JavaScriptSerializer jss = new JavaScriptSerializer();
                    context.Response.Write(jss.Serialize(list));
                }
            }

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        public class OptionContent
        {
            public string opvalue { get; set; }
            public string optext { get; set; }
        }
    }

说明：

    1.这里将学院和专业的处理文件写在一个中，通过post的参数进行判断进行相应处理。

    2.将数据结果进行json化，并且将数据结果进行对象的封装，使处理数据时更加的灵活。

    3.对象的创建，直接给出属性，偷了懒，其实可以用参数构建对象，然后给出Set和Get方法。

    4.前台的取值，通过json进行获取，注意看代码。

    5.学院和专业值从数据库中取得，具体细节，这里没有给出，但是读者应该可以了解。

    6.$.post中的参数，最好和ashx对应查看