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 ...
随机推荐
- Extjs学习笔记之九 数据模型(上)-extjs
来源:niutuku.com | vincent上传于2012-07-20 | 1802次浏览 | 0条评论 本文开始进入Extjs最核心最优秀的部分. 标签:Extjs 数据模型 Extjs的数 ...
- QML Object Attributes QML对象属性
QML Object Attributes Every QML object type has a defined set of attributes. Each instance of an obj ...
- 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备!
作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...
- ZooKeeper的注意事项
在ZooKeeper中存储的数据是以字节数组的形式存储的,当用Java程序处理数据时要注意. Ephemeral znodes并不会有child znode 只有parent-znode存在,才能创建 ...
- Extjs mvc
MVC的模式,模型(Models)和控制器(Controllers) Model模型 是字段和它们的数据的集合,例如User模型带有username和password字段,模型知道如何持久化自己的数据 ...
- 关于C语言中变量类型转换
今天在工作中遇到一个问题,而在解决问题的过程中,发现一段关于int 型变量(a)和char型(b)变量间类型转换的代码存在问题:一个值为255的int型变量a,强制类型转换并赋值给char型变量b后, ...
- 【转】Tomcat源代码阅读系列
在IntelliJ IDEA 和 Eclipse运行tomcat 7源代码(Tomcat源代码阅读系列之一) Tomcat总体结构(Tomcat源代码阅读系列之二) Tomcat启动过程(Tomcat ...
- winform调用cmd命令
string str = Console.ReadLine(); System.Diagnostics.Process p = new System.Diagnostics.Process(); p. ...
- EFcore与动态模型(三)
紧接着上面的内容,我们继续看下动态模型页面交互实现方式,内容如下: 1,如何实现动态表单 2,如何接收表单数据并绑定到动态模型上 一.如何实现动态表单 由于模型信息都是后台自定义配置的,并不是固定不变 ...
- web前端的发展态势 浅识
以前 作为一个java程序员写的代码主要还是后台的代码,虽然开始的时候前后端都写,但是也是用别人造好的轮子来用,学学html,css,js,jquery,再找一个前端ui框架学学,上手之后我们就可以写 ...