jQuery 事件——关于select选中
场景:
eg:在管理一篇博文时,因博文的管理有一列叫:状态的列,该列有诸多状态,如:正常,待审核,删除等... 此时,若使用Select下拉列表进行状态选择,并在选中具体项值后,通过Ajax异步提交,在效果及体验上就能得到更大化的体验。
下拉列表例子如下:
<select id="status">
<option value="0" >待审核</option>
<option value="1" >未通过审核</option>
<option value="2" >制作中</option>
<option value="3">制作完成</option>
<option value="4" >发布</option>
<option value="5">暂停</option>
<option value="6">删除</option>
</select>
错误示范:
$("select#status").click(function(){
console.log($(this).val());
});
若通过click事件执行,则在点击下拉列表的首次便会触发一次Ajax请求,这样并不符合逻辑,故不能使用click事件作为下拉列表选中具体值的做法。
正确示范:
$("select#status").change(function(){
console.log($(this).val());
});
W3SCHOOL 对change事件的诠释如下:
定义和用法
当元素的值发生改变时,会发生 change 事件。
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。
change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。
注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
通过以上,能清楚明白,当对于Select下拉列表时,应该使用Change事件。
补充:
因为页面翻页也是使用Ajax技术进行异步处理,当翻页后,原写法将失效,此时应该使用如下代码进行执行:
$(document).on("change",'select#status',function(){
console.log($(this).val());
});
jQuery 事件——关于select选中的更多相关文章
- jquery事件之select选中事件
根据select下拉列表选中的不同选项执行不同的方法,工作中经常会用到,这里就要用到Jquery的select选中事件 这里给select加一个叫label_id的id,然后通过id选择器找到这个节点 ...
- Jquery怎么获取select选中项 自定义属性的值
Jquery如何获取select选中项 自定义属性的值?HTML code <select id="ddl" onchange="ddl_change(this)& ...
- jQuery如何获得select选中的值?input单选radio选中的值
jQuery取得select选中的值 本来以为jQuery("#select1").val();是取得选中的值, 那么jQuery("#select1").te ...
- jquery 如何获取select 选中项的下一个选项的值
<select> <option value="1" selected="selected">a</option> < ...
- Jquery 获取 radio/select选中值
Radio <input type="radio" name="rd" id="rd1" checked="checked& ...
- jQuery之获取select选中的值
本来以为jQuery("#select1").val();是取得选中的值, 那么jQuery("#select1").text();就是取得的文本. 这是不正确 ...
- JQuery 如何获取select选中的值
一.html代码 <select id="ddl"> <option value="100" emoney="12" &g ...
- 【jquery】jquery 在 ie6 下无法设置 select 选中的解决方法
本文主要解决在 ie6 下,jquery 无法设置 select 选中的问题.我们先看个例子: <!DOCTYPE HTML> <html lang="en-US" ...
- jquery设置select选中的文本
<select id="prov"> <option value="1">北京市</option> <option ...
随机推荐
- 关于Ansi_Nulls、Quoted_Identifier、Ansi_Padding的用法
--QUOTED_IDENTIFIER 语法SET QUOTED_IDENTIFIER { ON | OFF } 注释当 SET QUOTED_IDENTIFIER 为 ON 时,标识符可以由双引号 ...
- Jenkins在windows上的安装配置
今天是2月14号,所谓西方情人节,下班回来发现,2月14过的比七夕还火热.于是上网百度百科查询了"情人节". 毕竟是中国的百度啊.是这么解释的.我感到很欣慰.过得每一个节日都应该 ...
- 开放才能进步!Angular和Wijmo一起走过的日子
Angular 已成为广受欢迎的前端框架.去年9月份,期待已久的 Angular2 的正式版发布之后,Angular 又迎来了新一轮热潮.伴随着 Angular 这一路走来,Wijmo 一直都是第一个 ...
- C#类详解
类: 类是一种数据结构,它可以包含数据成员(常数和字段).函数成员(方法.属性.事件.索引器.运算符实例.构造函数静态构造函数和析构函数),以及嵌套类型.类类型支持继承,继承是一种机制,它使派生类可以 ...
- 【开源】NodeJS仿WebApi路由
用过WebApi或Asp.net MVC的都知道微软的路由设计得非常好,十分方便,也十分灵活.虽然个人看来是有的太灵活了,team内的不同开发很容易使用不同的路由方式而显得有点混乱. 不过这不是重点, ...
- React Native与原生项目连接与发布
前面的各种环境配置按照官方文档一步一步来,挺详细,宝宝在这里就不多说废话了. 其次,前面的配置,我参照的这个博主的文章React Native 集成到iOS原生项目 下面是宝宝掉过的坑(半径15M): ...
- 【转】Spring源码编译
原文地址: http://www.flyoung.me/2013/08/02/springcodecompile/ 参考资料: https://github.com/spring-projects/s ...
- java与javac的区别
1.前提:java分为两部分 一个是编译(javac命令),一个是运行(java命令) 2.java与javac的区别 javac负责的是编译,将.java文件编译成.class文件,当执行javac ...
- 过程 : 概念 : 结构 jobbox jobPost
概念是employer创建jobPost时,可以publish或unpublish. sort expired后,会通过server tast 去更新成history.所有的publish和unpub ...
- 每天一个linux命令(55)--at命令
在Windows系统中,Windows提供了计划任务这一功能,在控制面板 -> 性能与维护 -> 任务计划,它的功能就是安排自动运行的任务.通过 ‘ 添加任务计划’ 的一步步引导, ...