ajax实现dropdownlist无刷新二级联动

html 代码：

<asp:DropDownList ID="ddlSort" runat="server" οnchange="changeSelect(this.value);">
</asp:DropDownList>
&nbsp;&nbsp;
<asp:DropDownList ID="ddlSort2" runat="server" AutoPostBack="true">
<asp:ListItem Value="0" runat="server">选择二级分类</asp:ListItem>
</asp:DropDownList>
&nbsp;&nbsp;

js代码：

function changeSelect(selectId) {
$.post("/Admin/ajax/ShowSort2.aspx", { "id": selectId }, function (data) {

var xSel = data.getElementsByTagName("select");
//获得XML文档中的所有<select>标记
var select_root = document.getElementById("ddlSort2");
//获得网页中的第二个下拉框
select_root.options.length = 0;
//每次获得新的数据的时候先把每二个下拉框架的长度清0

// var option1 = new Option("选择二级分类", "0");
$("#ddlSort2").append("<option value='0'>选择二级分类</option>");

for (var i = 0; i < xSel.length; i++) {
var xValue = xSel[i].childNodes[0].firstChild.nodeValue;
//获得每个<select>标记中的第一个标记的值,也就是<value>标记的值
var xText = xSel[i].childNodes[1].firstChild.nodeValue;
//获得每个<select>标记中的第二个标记的值,也就是<text>标记的值

$("#ddlSort2").append("<option value=" + xValue + "\>" + xText + "\<\/option\>");
// var option = new Option(xText, xValue);
// //根据每组value和text标记的值创建一个option对象

// select_root.add(option); //将option对象添加到第二个下拉框中
}


});
}

ajax代码

object id = Request["id"];
if (id != null && id.ToString() != "")
{
if(StringHelper.IsInt(id.ToString()))
{
List<Cpsort2Model> list = new List<Cpsort2Model>();
list = CpsortManager.GetCpsort2BySortid(Convert.ToInt32(id.ToString()));

Response.ContentType = "text/xml";
Response.HeaderEncoding = System.Text.Encoding.GetEncoding("gb2312");

String xml_start = "<selects>";
String xml_end = "</selects>";
String xml = "";

for (int i = 0; i < list.Count; i++)
{
xml += "<select><value>"+list[i].Id2+"</value><text>"+list[i].Cpsort2+"</text></select>";
}

String last_xml = xml_start + xml + xml_end;
Response.Write(last_xml);

}
}

转载于:https://www.cnblogs.com/zhanghai/p/4461210.html