欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2012年02月03日 16:54:36   作者:  
在web應用里,我們經常需要通過其他控件的事件觸發(fā)動態(tài)構造DropDownList數(shù)據(jù)內容。在這節(jié)中,我們將會看到如何實現(xiàn)通過選擇第一個下來框的內容來動態(tài)構造第二個下拉框的內容
首先準備好頁面代碼:
復制代碼 代碼如下:

<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>
&nbsp;
</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">
&nbsp;
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<asp:DropDownList ID="ddlSecond" runat="server">
<asp:ListItem Value="" Text="--- 請選擇 ---"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</fieldset>
</div>
</form>

主要通過jQuery的append方法動態(tài)添加內容,腳本代碼如下:
復制代碼 代碼如下:

<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>


最終顯示效果如下:


動態(tài)添加內容還可以通過以下方式添加:
$("#ddlSecond").append($("<option></option>").val("31").html("藍色1"));

相關文章

最新評論