ASP.NET jQuery 實例8 (動態添加內容到DropDownList)

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> ASP.NET jQuery 實例8 (動態添加內容到DropDownList)

編輯：JQuery特效代碼

首先准備好頁面代碼：
. 代碼如下:
<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"));

JQuery特效代碼

JQuery1.4+ Ajax IE8 內存洩漏問題: 並且JQuery1.3.2版本不存在，JQuery1.4+版本存在通過對比，最終找到這兩個版本的其
jQuery 選擇器、DOM操作、事件、動畫: Jquery選擇器$(document).ready(function(){})$(function
JQuery浮動DIV提示信息並自動隱藏的代碼: 代碼如下: /** * 浮動DIV定時顯示提示信息,如操作成功, 失敗等 * @param stri

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章