快捷導(dǎo)航

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="--- 請選擇 ---" 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> 

選擇一種顏色顯示如下：

您可能感興趣的文章:

相關(guān)文章

jQuery修改class屬性和CSS樣式整理
這篇文章主要整理分享了jQuery修改class屬性和CSS樣式,十分詳細(xì)，需要的朋友可以參考下
2015-01-01
jQuery操作之效果詳解
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
jquery多瀏覽器捕捉回車事件代碼
最近我們網(wǎng)站做一個(gè)合作項(xiàng)目要求在頁面中捕捉回車事件，經(jīng)過好多測試找到這個(gè)
2010-06-06
jquery中this的使用說明
在使用jquery操作js時(shí)，經(jīng)常整不明白this與$(this)。抽空仔細(xì)測試了一把，記錄下來以供在忘記的時(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 的EasyLoader功能介紹
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