级联菜单问题（C#，asp.net）

Question

我有两个DropDownList，都是动态根据数据库添加数据的。想问下高手，怎么可以根据第一个DropDownList所选择的项，改变第二个的数据。而且不会刷新页面，不会有兼容问题或写一大堆兼容代码。

Answer 1

不刷新页面的话，我知道有三个方法。
1.用.net自带的异步控件，就是那个ScriptManager和UpdatePanel的那个，优点就是可以完全用服务器端控件，不用谢太多前台代码，快捷便利。缺点就是貌似兼容性不太好，而且挺耗系统资源，而且用了之后不兼容一切前台手写的JS脚本（我2年前用的时候就是这样，后来一直没用，不知道现在还存不存在这些问题）。

2.第一个DropDownList用服务器端控件，并绑定数据。第二个用客户端Select下拉列表控件，然后写Ajax脚本，再第一个下拉列表发生变化时出发异步请求函数，完成第二个下拉列表的数据绑定（异步请求后台，返回xml格式数据，然后给第二个select控件appendChild一系列的option）。这个方法优点是速度快，兼容性好（我最喜欢用这个，我各种IE6 7 8 火狐遨游啥的都兼容），全页面无刷新，而且是客户端控件，给服务器造成的负载相对轻一些。缺点是没有现成的Js封装代码的话会要求手写大量代码（需要的话留个联系方式我发你一个），而且要写相应的后台处理页面或者是WebMethod，对JS掌握程度有一定要求。

3.要么就这么着，第二个下拉列表写在一个aspx页面里，下拉列表就用服务器端的DropDownList，然后在级联页面用iframe把那个aspx页面给镶进去。第一个下拉列表选择触发后台事件，然后通过参数传递个第二个下拉列表的aspx页面，然后在第二个aspx页面里写绑定方法，然后重新DataBind。这样不会引起整个页面刷新，刷新只刷新第二个aspx页面。这样做优点也是不用写太多JS代码，光用后台代码实现。缺点就是麻烦死了，还得考虑第二个页面如何将值传给第一个页面。

我知道的就这么多了。。

Answer 2

用AJAX 的局部刷新空间 updatepanel！你把你的两个DropDownList放在同一个updatepanel应该就可以了，不过如果很多人还是选择用JavaScript！都可以实现，只Javascript会比较麻烦点

追问

给点代码吧！

追答

这个是javascript的，从别人那借过来的

联动菜单

var section1 = new Array();
section1[0] = ["1.1 aaa","section1.1"]
section1[1] = ["1.2 bbb","section1.2"]
section1[2] = ["1.3 ccc","section1.3"]
var section2 = new Array();
section2[0] = ["2.1 aaa","section2.1"]
section2[1] = ["2.2 aaa","section2.2"]
section2[2] = ["2.3 aaa","section2.3"]
var section3 = new Array();
section3[0] = ["3.1 aaa","section3.1"]
section3[1] = ["3.2 aaa","section3.2"]
section3[2] = ["3.3 aaa","section3.3"]
var chapterArr = new Array();
chapterArr[0] = ["第1章","chapter1",section1];
chapterArr[1] = ["第2章","chapter2",section2];
chapterArr[2] = ["第3章","chapter3",section3];
function setSection(chapter)
{
for (var i=document.myForm.section.length-1;i>-1;i--)
{
document.myForm.section.remove(i);
}
var arr = chapterArr[chapter][2];
for (var i=0;i"+arr[i][1]);
}
}
for (var i=0;i"+chapterArr[i][1]);
}
setSection(0);

http://zhidao.baidu.com/question/73586560.html?an=0&si=4

Answer 3

用ajax，很好实现

追问

给点代码吧！

追答

$('#Province').change(function() {
$.ajax({
type: "POST",
url: "/Address/GetAddress",
data: "name=" + $(this).val(),
success: function(json) {
$("#City option[value!='']").remove();
for (var item in json) {
$("#City").append("" + json[item].Text + "");
}
$("#District option[value!='']").remove();
}
});
})

jQuery的具体实现，希望你能看懂啊

Answer 4

用javascript

追问

给点代码吧！

追答

var sorts=new Array;

function AddMainList()
{
var mainSort=document.getElementById("DropDownList1");
mainSort.options.length=0;
mainSort.options.add(new Option("全部分类",-1));
var i=0;
while(i"+selectValue1+""+selectText1+""+selectValue2+""+selectText2;
return false;
}