最近做一个项目，要求实现二级联动效果。背景为：通过学院的选择，联动出专业选项。起初想直接用微软的控件实现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();
)
{
context.Response.Write("nodata");
}
else
{
List<OptionContent> list = new List<OptionContent>();
; 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);
)
{
context.Response.Write("nodata");
}
else
{
List<OptionContent> list = new List<OptionContent>();
; 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对应查看