Posted in Javascript onFebruary 03, 2012
首先准备好页面代码：
<form id="form1" runat="server"> <div align="left"> <fieldset style="width: 350px; height: 150px"> <p> 选择颜色</p> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td> </td> <td> <asp:DropDownList ID="ddlFirst" runat="server"> <asp:ListItem Value="" Text="--- 请选择 ---"></asp:ListItem> <asp:ListItem Value="1" Text="红色"></asp:ListItem> <asp:ListItem Value="2" Text="黄色"></asp:ListItem> <asp:ListItem Value="3" Text="蓝色"></asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td> <asp:DropDownList ID="ddlSecond" runat="server"> <asp:ListItem Value="" Text="--- 请选择 ---"></asp:ListItem> </asp:DropDownList> </td> </tr> </table> </fieldset> </div> </form>
主要通过jQuery的append方法动态添加内容，脚本代码如下：
<head runat="server">
<title>Recipe8</title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ddlFirst").bind("change", function () { // 添加change事件
$("#ddlSecond option").remove(); // 先删除所有项，以便重新加载
$("#ddlSecond").append("<option value=''>--- 请选择 ---</option>");
if ($(this).val() == 1) {
$("#ddlSecond").append("<option value='11'>红色1</option>");
$("#ddlSecond").append("<option value='12'>红色2</option>");
$("#ddlSecond").append("<option value='13'>红色3</option>");
}
else if ($(this).val() == 2) {
$("#ddlSecond").append("<option value='21'>黄色1</option>");
$("#ddlSecond").append("<option value='22'>黄色2</option>");
$("#ddlSecond").append("<option value='23'>黄色3</option>");
}
else if ($(this).val() == 3) {
$("#ddlSecond").append("<option value='31'>蓝色1</option>");
$("#ddlSecond").append("<option value='32'>蓝色2</option>");
$("#ddlSecond").append("<option value='33'>蓝色3</option>");
}
});
});
</script>
</head> 最终显示效果如下：
动态添加内容还可以通过以下方式添加：
$("#ddlSecond").append($("<option></option>").val("31").html("蓝色1"));
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@