场景:

  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. ArcGIS制图表达Representation实战篇3-控制点

    ArcGIS制图表达Representation实战篇3-控制点 by 李远祥 这一章讲述的是一个非常专业的名词,叫控制点.此控制点非测绘行业术语的控制点,而是制图表达里面的控制点,所以不能混为一谈. ...

  2. Robot Framework和Selenium 2 Grid集成指南

    1. 环境搭建 A. 所需软件 1. Selenium2Lib 1.0.1 这个特性需要用到Selenium2Lib的最新版本1.0.1,但是这个版本还有一些iframe支持和IE支持的问题需要修改, ...

  3. .net学习网站汇总

    http://chs.gotdotnet.com/quickstart/简介:本站点是微软.NET技术的快速入门网站,我们不必再安装.NET Framework中的快速入门示例程序,直接在网上查看此示 ...

  4. iptables 完成联网控制 (续) ,独立native进程监听。

    上一篇:http://www.cnblogs.com/oscar1011/p/5243877.html 之前做的iptables 来进行的联网控制,一直耿耿于怀,想要知道系统里的netd等等是如何做到 ...

  5. Raspberry树莓派学习笔记1—基本介绍

    树莓派的简单介绍 一个名片大小的迷你个人电脑主机,还有wifi/蓝牙... 运行完整的Linux操作系统(注意关键字:完整,不是精简过的嵌入式Linux) 开源的硬件平台.与普通主机不同的是,它带有简 ...

  6. C#属性和字段

    属性 属性是一种用于访问对象或类的特性的成员.属性是字段的自然扩展,这两者都是具有关联类型的命名成员.而且访问字段和属性的语法是相同的.然而,与字段不同,属性不表示存储位置.相反属性具有访问器,这些访 ...

  7. 前端福利:使用Wallpaper Engine让自己的桌面炫酷起来

    Wallpaper Engine,是一款Steam上的特别特别炫酷的壁纸定制软件.它可以对你的桌面进行定制,可以使用视频,动画,网页等形式来替换壁纸. 注意到没,关键是可以使用Html格式的文件作为桌 ...

  8. 关于c# 基础运算符的应用

    运算符 分为5种 1 算数预算符 +,-,*,/,分别为加减乘除 ++为加1,--为减1, 前++   后++  的区别 int a = 10, b = a++;            Console ...

  9. USTC 1119 graph 图的同构

    USTC 1119 图的同构的严格定义可以参考离散数学:The simple graphs G1=(V1,E1) and G2=(V2,E2)are isomorphic if there exist ...

  10. 从零开始搭建Salt Web之封装salt-api接口

    salt-api现在已经正常运行,接下来则是实现通过调用salt-api来执行salt命令. 调用salt-api执行命令时,记得携带c_path参数 因为salt中自带了tornado这个库,所以决 ...