ASP.NET jQuery 實(shí)例8 (動(dòng)態(tài)添加內(nèi)容到DropDownList)
<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="--- 請(qǐng)選擇 ---"></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="--- 請(qǐng)選擇 ---"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
主要通過(guò)jQuery的append方法動(dòng)態(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(); // 先刪除所有項(xiàng),以便重新加載
$("#ddlSecond").append("<option value=''>--- 請(qǐng)選擇 ---</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>
最終顯示效果如下:
動(dòng)態(tài)添加內(nèi)容還可以通過(guò)以下方式添加:
$("#ddlSecond").append($("<option></option>").val("31").html("藍(lán)色1"));
- Jquery操作下拉框(DropDownList)實(shí)現(xiàn)取值賦值
- Jquery加載時(shí)從后臺(tái)讀取數(shù)據(jù)綁定到dropdownList實(shí)例
- jquery獲取ASP.NET服務(wù)器端控件dropdownlist和radiobuttonlist生成客戶(hù)端HTML標(biāo)簽后的value和text值
- asp.net省市三級(jí)聯(lián)動(dòng)的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- Jquery實(shí)現(xiàn)無(wú)刷新DropDownList聯(lián)動(dòng)實(shí)現(xiàn)代碼
- jQuery 自定義下拉框(DropDown)附源碼下載
相關(guān)文章
jQuery+PHP星級(jí)評(píng)分實(shí)現(xiàn)方法
很多網(wǎng)站都應(yīng)用了星級(jí)評(píng)分效果,讓用戶(hù)可以對(duì)正在瀏覽的文章、電影、資源等進(jìn)行評(píng)分,讓網(wǎng)站增添了幾分互動(dòng)效果。本文將講解如何使用jQuery和PHP來(lái)實(shí)現(xiàn)星級(jí)評(píng)分效果。2015-10-10jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單好用的彈出框
這篇文章主要介紹了jquery如何實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的彈出框,經(jīng)測(cè)試非常好用,代碼簡(jiǎn)潔,留著以后工作時(shí)候再用2014-09-09jQuery多文件異步上傳帶進(jìn)度條實(shí)例代碼
這篇文章主要介紹了jQuery多文件異步上傳帶進(jìn)度條實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08jQuery實(shí)現(xiàn)模仿微博下拉滾動(dòng)條加載數(shù)據(jù)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)模仿微博下拉滾動(dòng)條加載數(shù)據(jù)效果,涉及jQuery響應(yīng)下拉滾動(dòng)事件動(dòng)態(tài)操作頁(yè)面元素的技巧,需要的朋友可以參考下2015-12-12解決jquery有正確返回值但不執(zhí)行success函數(shù)的問(wèn)題
今天小編就為大家分享一篇解決jquery有正確返回值但不執(zhí)行success函數(shù)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08jQuery基于排序功能實(shí)現(xiàn)上移、下移的方法
這篇文章主要介紹了jQuery基于排序功能實(shí)現(xiàn)上移、下移的方法,結(jié)合實(shí)例形式分析了jQuery使用ajax與后臺(tái)php交互實(shí)現(xiàn)元素的排序,上移、下移功能相關(guān)操作技巧2016-11-11jQuery插件jsonview展示json數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jQuery插件jsonview展示json數(shù)據(jù)的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05jQuery實(shí)現(xiàn)高度靈活的表單驗(yàn)證功能示例【無(wú)UI】
這篇文章主要介紹了jQuery實(shí)現(xiàn)高度靈活的表單驗(yàn)證功能,涉及jQuery正則判斷與頁(yè)面元素動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2020-04-04用jquery寫(xiě)的一個(gè)萬(wàn)年歷(自寫(xiě))
萬(wàn)年歷,想必大家對(duì)它都不陌生吧,下面是使用jquery寫(xiě)的一個(gè)萬(wàn)年歷示例,喜歡的朋友可以參考下2014-01-01