ASP.NET jQuery 實(shí)例7 通過jQuery來獲取DropDownList的Text/Value屬性值
更新時(shí)間：2012年02月03日 16:52:00 作者：
這節(jié)我們將通過jQuery來獲取DropDownList的Text/Value屬性值,需要的朋友可以參考下
界面代碼：
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 400px; height: 80px;">
<p>
選擇顏色：</p>
<asp:DropDownList ID="ddlColor" runat="server">
<asp:ListItem Text="--- 請(qǐng)選擇 ---" Value=""></asp:ListItem>
<asp:ListItem Text="紅色" Value="1"></asp:ListItem>
<asp:ListItem Text="黃色" Value="2"></asp:ListItem>
<asp:ListItem Text="藍(lán)色" Value="3"></asp:ListItem>
</asp:DropDownList>
</fieldset>
</div>
<br />
<div align="center" id="message">
</div>
</form>
腳本代碼：
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// 綁定keyup和change事件
$("#<%=ddlColor.ClientID %>").bind("keyup change", function () {
if ($(this).val() != "") {
// 這里需要注意，$(this).text()獲取的是整個(gè)集合的text屬性內(nèi)容，所以需要再過濾下，把選中的項(xiàng)取出來
$("#message").text("Text: " + $(this).find(":selected").text() + "Value: " + $(this).val());
}
else {
$("#message").text("");
}
});
});
</script>
選擇一種顏色顯示如下：
復(fù)制代碼 代碼如下:
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 400px; height: 80px;">
<p>
選擇顏色：</p>
<asp:DropDownList ID="ddlColor" runat="server">
<asp:ListItem Text="--- 請(qǐng)選擇 ---" Value=""></asp:ListItem>
<asp:ListItem Text="紅色" Value="1"></asp:ListItem>
<asp:ListItem Text="黃色" Value="2"></asp:ListItem>
<asp:ListItem Text="藍(lán)色" Value="3"></asp:ListItem>
</asp:DropDownList>
</fieldset>
</div>
<br />
<div align="center" id="message">
</div>
</form>
腳本代碼：
復(fù)制代碼 代碼如下:
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// 綁定keyup和change事件
$("#<%=ddlColor.ClientID %>").bind("keyup change", function () {
if ($(this).val() != "") {
// 這里需要注意，$(this).text()獲取的是整個(gè)集合的text屬性內(nèi)容，所以需要再過濾下，把選中的項(xiàng)取出來
$("#message").text("Text: " + $(this).find(":selected").text() + "Value: " + $(this).val());
}
else {
$("#message").text("");
}
});
});
</script>
選擇一種顏色顯示如下：
您可能感興趣的文章:
- asp.net DropDownList自定義控件，讓你的分類更清晰
- ASP.NET MVC DropDownList數(shù)據(jù)綁定及使用詳解
- ASP.NET MVC中為DropDownListFor設(shè)置選中項(xiàng)的方法
- ASP.NET中DropDownList和ListBox實(shí)現(xiàn)兩級(jí)聯(lián)動(dòng)功能
- ASP.NET 2.0中的數(shù)據(jù)操作之七：使用DropDownList過濾的主/從報(bào)表
- ASP.NET 2.0中的數(shù)據(jù)操作之八：使用兩個(gè)DropDownList過濾的主/從報(bào)表
- 在ASP.NET 2.0中操作數(shù)據(jù)之三十：格式化DataList和Repeater的數(shù)據(jù)
- 在ASP.NET 2.0中操作數(shù)據(jù)之三十一：使用DataList來一行顯示多條記錄
- 在ASP.NET 2.0中操作數(shù)據(jù)之三十二：數(shù)據(jù)控件的嵌套
- 在ASP.NET 2.0中操作數(shù)據(jù)之三十三：基于DataList和Repeater使用DropDownList過濾的主/從報(bào)表
相關(guān)文章
這篇文章主要整理分享了jQuery修改class屬性和CSS樣式,十分詳細(xì)，需要的朋友可以參考下2015-01-01
jQuery效果操作一共分五類：1.基本，2.滑動(dòng)，3.淡入淡出，4.自定義，5.設(shè)置。本文將對(duì)此詳細(xì)介紹。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05
jquery實(shí)現(xiàn)的隨機(jī)多彩tag標(biāo)簽隨機(jī)顏色和字號(hào)大小效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的隨機(jī)多彩tag標(biāo)簽隨機(jī)顏色和字號(hào)大小效果,需要的朋友可以參考下2014-03-03
最近我們網(wǎng)站做一個(gè)合作項(xiàng)目要求在頁面中捕捉回車事件，經(jīng)過好多測(cè)試找到這個(gè)2010-06-06
在使用jquery操作js時(shí)，經(jīng)常整不明白this與$(this)。抽空仔細(xì)測(cè)試了一把，記錄下來以供在忘記的時(shí)候拉出來參考參考！2010-09-09
jQuery中的deferred對(duì)象和extend方法詳解
本篇文章主要介紹了jQuery中的deferred對(duì)象和extend方法，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05
淺析jQuery 遍歷函數(shù)，javascript中的each遍歷
下面小編就為大家?guī)硪黄獪\析jQuery 遍歷函數(shù)，javascript中的each遍歷。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
jQuery EasyUI是一款基于JQuery的UI快速搭建組件。今天介紹下EasyLoader的功能。2010-09-09
運(yùn)用JQuery的toggle實(shí)現(xiàn)網(wǎng)頁加載完成自動(dòng)彈窗
toggle()事件 它主要切換元素的可見狀態(tài)，下面為大家介紹下運(yùn)用JQuery的toggle實(shí)現(xiàn)網(wǎng)頁加載完成自動(dòng)彈窗2014-03-03
jquery實(shí)現(xiàn)搜索框功能實(shí)例詳解
這篇文章主要介紹了jquery實(shí)現(xiàn)搜索框功能,搜索框?qū)崿F(xiàn)搜索一個(gè)ul列表中的指定關(guān)鍵詞的li。具體實(shí)現(xiàn)代碼大家參考下本文2018-07-07