ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值


Posted in Javascript onFebruary 03, 2012

界面代码:

<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="蓝色" 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()获取的是整个集合的text属性内容,所以需要再过滤下,把选中的项取出来 
$("#message").text("Text: " + $(this).find(":selected").text() + "Value: " + $(this).val()); 
} 
else { 
$("#message").text(""); 
} 
}); 
}); 
</script>

选择一种颜色显示如下:

ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值

Javascript 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
详解 TypeScript 枚举类型
Nov 02 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 #Javascript
jQuery.extend 函数详解
Feb 03 #Javascript
jquery插件开发方法(初学者)
Feb 03 #Javascript
jquery插件制作简单示例说明
Feb 03 #Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 #Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 #Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 #Javascript
You might like
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
JavaScript中join()方法的使用简介
2015/06/09 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python中一般处理中文的几种方法
2019/03/06 Python
python进程和线程用法知识点总结
2019/05/28 Python
django删除表重建的实现方法
2019/08/28 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
python第三方库学习笔记
2020/02/07 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
医德医风自我评价
2014/09/19 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
教师节获奖感言
2015/07/31 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript