ASP.NET jQuery 實(shí)例7 通過(guò)jQuery來(lái)獲取DropDownList的Text/Value屬性值
更新時(shí)間:2012年02月03日 16:52:00 作者:
這節(jié)我們將通過(guò)jQuery來(lái)獲取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)容,所以需要再過(guò)濾下,把選中的項(xiàng)取出來(lái)
$("#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)容,所以需要再過(guò)濾下,把選中的項(xiàng)取出來(lái)
$("#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過(guò)濾的主/從報(bào)表
- ASP.NET 2.0中的數(shù)據(jù)操作之八:使用兩個(gè)DropDownList過(guò)濾的主/從報(bào)表
- 在ASP.NET 2.0中操作數(shù)據(jù)之三十:格式化DataList和Repeater的數(shù)據(jù)
- 在ASP.NET 2.0中操作數(shù)據(jù)之三十一:使用DataList來(lái)一行顯示多條記錄
- 在ASP.NET 2.0中操作數(shù)據(jù)之三十二:數(shù)據(jù)控件的嵌套
- 在ASP.NET 2.0中操作數(shù)據(jù)之三十三:基于DataList和Repeater使用DropDownList過(guò)濾的主/從報(bào)表
相關(guān)文章
jquery實(shí)現(xiàn)的藍(lán)色二級(jí)導(dǎo)航條效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的藍(lán)色二級(jí)導(dǎo)航條效果代碼,涉及jquery鼠標(biāo)事件及頁(yè)面樣式的動(dòng)態(tài)切換效果實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08分享十五款 jQuery 社交網(wǎng)絡(luò)分享插件
這篇文章主要介紹了分享十五款 jQuery 社交網(wǎng)絡(luò)分享插件,需要的朋友可以參考下2015-05-05jquery自定義插件——window的實(shí)現(xiàn)【示例代碼】
下面小編就為大家?guī)?lái)一篇jquery自定義插件——window的實(shí)現(xiàn)【示例代碼】。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-05JS中批量給元素綁定事件過(guò)程中的相關(guān)問(wèn)題使用閉包解決
解決元素批量綁定事件的時(shí)候,出現(xiàn)i=最后一個(gè)循環(huán)變量的值的方法有兩種:把這個(gè)循環(huán)變量保存起來(lái),不要讓它的作用域在整個(gè)函數(shù),而是在循環(huán)體內(nèi)2013-04-04jQuery實(shí)現(xiàn)淡入淡出的模態(tài)框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)淡入淡出的模態(tài)框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jQuery實(shí)現(xiàn)復(fù)選框全選/取消全選/反選及獲得選擇的值
這篇文章主要介紹了jQuery實(shí)現(xiàn)的復(fù)選框全選/取消全選/反選及獲得選擇的值,需要的朋友可以參考下2014-06-06