场景:

  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选中的更多相关文章

  1. jquery事件之select选中事件

    根据select下拉列表选中的不同选项执行不同的方法,工作中经常会用到,这里就要用到Jquery的select选中事件 这里给select加一个叫label_id的id,然后通过id选择器找到这个节点 ...

  2. Jquery怎么获取select选中项 自定义属性的值

    Jquery如何获取select选中项 自定义属性的值?HTML code <select id="ddl" onchange="ddl_change(this)& ...

  3. jQuery如何获得select选中的值?input单选radio选中的值

    jQuery取得select选中的值 本来以为jQuery("#select1").val();是取得选中的值, 那么jQuery("#select1").te ...

  4. jquery 如何获取select 选中项的下一个选项的值

    <select> <option value="1" selected="selected">a</option> < ...

  5. Jquery 获取 radio/select选中值

    Radio <input type="radio" name="rd" id="rd1" checked="checked& ...

  6. jQuery之获取select选中的值

    本来以为jQuery("#select1").val();是取得选中的值, 那么jQuery("#select1").text();就是取得的文本. 这是不正确 ...

  7. JQuery 如何获取select选中的值

    一.html代码 <select id="ddl"> <option value="100" emoney="12" &g ...

  8. 【jquery】jquery 在 ie6 下无法设置 select 选中的解决方法

    本文主要解决在 ie6 下,jquery 无法设置 select 选中的问题.我们先看个例子: <!DOCTYPE HTML> <html lang="en-US" ...

  9. jquery设置select选中的文本

    <select id="prov">  <option value="1">北京市</option>  <option ...

随机推荐

  1. pwnable.kr-fd-Writeup

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  2. 封装keyframes插件

    模仿jquery,使用简单,自动添加浏览器前缀 var keyframes = new SHBKerframes(); keyframes.define([{ name:'myAnimate', 0% ...

  3. Java面向对象知识点

    对象:一切客观存在的事物都是对象 语法部分: 类的概念:1.类是对象的抽象 2.类是客观事物在人脑中的主观反应 3.类是对象的模板 类的设计: 属性:定义位置:类以内,方法以外 实例变量:1 有默认值 ...

  4. Nginx http 500错误分析及解决方法

      出现场景:   在用nginx做负载均衡服务器对系统做并发测试,并发量比较大时Nginx会报出Http 500错误     报错原因:   访问量大的时候,由于系统资源限制,而不能打开过多的文件 ...

  5. Matlab将三维变量分割为多个二维变量的方法

    最近在处理 Matlab 中的三维矩阵的时候,遇到了一个问题: 假如m 为 5*5*5的矩阵,如果以第三个维度为基础,分割为5个不同的矩阵 m1,m2,m3,m4,应该如何解决? 解决方法:eval函 ...

  6. 读书笔记 effective c++ Item 22 将数据成员声明成private

    我们首先看一下为什么数据成员不应该是public的,然后我们将会看到应用在public数据成员上的论证同样适用于protected成员.最后够得出结论:数据成员应该是private的. 1. 为什么数 ...

  7. mysql 添加登录用户

    一, 创建用户: 命令:CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明:username - 你将创建的用户名, host - 指 ...

  8. 利用IIS和Nginx实现负载均衡

    一直对Nginx反向代理和负载均衡感兴趣,今天在Windows下搭建了一个简单实例.步骤如下: 1.下载Nginx,我下载的是最新的1.11.10版本,地址http://nginx.org/downl ...

  9. PHP工厂模式

    class yunsuan { public $a; public $b; function suan() { echo "对两个数进行运算"; } } class jia ext ...

  10. Asp.net缓存技术(HttpRuntime.Cache)

    一.缓存: 5个等级的缓存 1级是网络级缓存,缓存在浏览器,CDN以及代理服务器中   (举个例子:每个帮助页面都进行了缓存,访问一个页面的代码非常简单) 2级是由.net框架 HttpRuntime ...