ASP.NET jQuery 實例8 (動態(tài)添加內(nèi)容到DropDownList)
更新時間:2012年02月03日 16:54:36 作者:
在web應(yīng)用里,我們經(jīng)常需要通過其他控件的事件觸發(fā)動態(tài)構(gòu)造DropDownList數(shù)據(jù)內(nèi)容。在這節(jié)中,我們將會看到如何實現(xiàn)通過選擇第一個下來框的內(nèi)容來動態(tài)構(gòu)造第二個下拉框的內(nèi)容
首先準(zhǔn)備好頁面代碼:
<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="藍(lán)色"></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方法動態(tài)添加內(nè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'>藍(lán)色1</option>");
$("#ddlSecond").append("<option value='32'>藍(lán)色2</option>");
$("#ddlSecond").append("<option value='33'>藍(lán)色3</option>");
}
});
});
</script>
</head>
最終顯示效果如下:
動態(tài)添加內(nèi)容還可以通過以下方式添加:
$("#ddlSecond").append($("<option></option>").val("31").html("藍(lán)色1"));
復(fù)制代碼 代碼如下:
<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="藍(lán)色"></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方法動態(tài)添加內(nèi)容,腳本代碼如下:
復(fù)制代碼 代碼如下:
<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'>藍(lán)色1</option>");
$("#ddlSecond").append("<option value='32'>藍(lán)色2</option>");
$("#ddlSecond").append("<option value='33'>藍(lán)色3</option>");
}
});
});
</script>
</head>
最終顯示效果如下:
動態(tài)添加內(nèi)容還可以通過以下方式添加:
$("#ddlSecond").append($("<option></option>").val("31").html("藍(lán)色1"));
您可能感興趣的文章:
- Jquery操作下拉框(DropDownList)實現(xiàn)取值賦值
- Jquery加載時從后臺讀取數(shù)據(jù)綁定到dropdownList實例
- jquery獲取ASP.NET服務(wù)器端控件dropdownlist和radiobuttonlist生成客戶端HTML標(biāo)簽后的value和text值
- asp.net省市三級聯(lián)動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- Jquery實現(xiàn)無刷新DropDownList聯(lián)動實現(xiàn)代碼
- jQuery 自定義下拉框(DropDown)附源碼下載
相關(guān)文章
jQuery實現(xiàn)模仿微博下拉滾動條加載數(shù)據(jù)效果
這篇文章主要介紹了jQuery實現(xiàn)模仿微博下拉滾動條加載數(shù)據(jù)效果,涉及jQuery響應(yīng)下拉滾動事件動態(tài)操作頁面元素的技巧,需要的朋友可以參考下2015-12-12解決jquery有正確返回值但不執(zhí)行success函數(shù)的問題
今天小編就為大家分享一篇解決jquery有正確返回值但不執(zhí)行success函數(shù)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08jQuery插件jsonview展示json數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jQuery插件jsonview展示json數(shù)據(jù)的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-05-05jQuery實現(xiàn)高度靈活的表單驗證功能示例【無UI】
這篇文章主要介紹了jQuery實現(xiàn)高度靈活的表單驗證功能,涉及jQuery正則判斷與頁面元素動態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2020-04-04