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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
js实现随机圆与矩形功能
Oct 29 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/12/06 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
CI框架Session.php源码分析
2014/11/03 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
Python的Flask框架与数据库连接的教程
2015/04/20 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
私有程序集与共享程序集有什么区别
2013/04/05 面试题
linux面试相关问题
2012/08/11 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
秋季运动会活动方案
2014/02/05 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
pytorch 6 batch_train 批训练操作
2021/05/28 Python