--建表脚本
if exists(select * from sysobjects where name='Es_Catalog')
drop table Es_Catalog
go
create table Es_Catalog
(
cid int primary key identity(1,1),
CatalogID decimal not null,
ParentID decimal not null,
CatalogName varchar(30) not null
)
--JQueryDropDownList.aspx
<head runat="server">
<title>Jquery、DropDownList 联动实现</title>
<script type="text/javascript" src="JS/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(
function funOnLoad()
{
$("#<%=DropDownList1.ClientID %>").change( //DropDownList1改变时执行
function fun_change()
{
var val = $("#<%=DropDownList1.ClientID %> option:selected").val();//获取当前选择的值作为参数
$.ajax({
url:'AjaxQuarter.ashx',
type:'get',
data:{'CatalogID':val},
dataType:'xml',
error: function()
{
alert("异步请求失败!");
},
success: function(xml)
{
$("#<%=DropDownList2.ClientID %>").empty();//清空DropDownList2
$(xml).find('Table').each( //找到Table 迭代
function()
{
var catalogID = $(this).find("CatalogID").text();
var catalogName = $(this).find("CatalogName").text();
$("<option value="+"/""+catalogID+"/""+">"+catalogName+"</option>").appendTo($("#<%=DropDownList2.ClientID %>"));
}
);
}
});
}
);
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server">
</asp:DropDownList>
</div>
</form>
</body>
</html>