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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
详解小程序云开发数据库
May 20 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Python字典底层实现原理详解
2019/12/18 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
教育系毕业生中文求职信范文
2013/10/06 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
团日活动总结怎么写
2014/06/25 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript