DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> ASP.NET jQuery 實例8 (動態添加內容到DropDownList)
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"));
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved