场景:

  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. 【noip 2009】 乌龟棋 记忆化搜索&动规

    题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家控制一个乌龟棋子从起 ...

  2. Exception in thread "main" org.hibernate.HibernateException: save is not valid without active transaction

    在spring4+hibernate4整合过程中,使用@Transactional注解事务会报"Exception in thread "main" org.hibern ...

  3. (3)activiti流程的挂起和激活

    有时候,我们需要对一个已经执行的流程进行暂停,而不是删除它,这个时候就需要我们调用activiti暂停和激活的api来操作他们 每启动一个流程实例,都会在该流程实例下产生相应的流程任务,处于1*多的关 ...

  4. C语言memset学习

    #include <stdio.h> #include <memory.h> ]); //函数声明 void main(){ ]={{,,},{,,},{,,},{,,}};/ ...

  5. 小机器人自动回复(python,可扩展开发微信公众号的小机器人)

    api来之图灵机器人.我们都知道微信公众号可以有自动回复,我们先用python脚本编写一个简单的自动回复的脚本,利用图灵机器人的api. http://www.tuling123.com/help/h ...

  6. SpringMVC简版教程、部分功能

    注:本文只用注解来实现 前言 SpringMVC各种流程图流程图(其他的各种流程图) jsp.xml.action彼此之间的关系,都如何使用 spring-mvc.xml如何配置,放在哪里? acti ...

  7. BZOJ 1875: [SDOI2009]HH去散步(矩阵乘法)

    首先,题意就把我们引向了矩阵乘法,注意边长m<=60,那么就按边建图,变成一个120个点的图,然后乱搞就行了。 PS:WA了N久改了3次终于A了QAQ CODE: #include<cst ...

  8. jQuery源码学习:Sizzle

    本文所有讨论均基于jQuery版本3.1.1,官网http://jquery.com/. 一 简介 Sizzle是用javascript实现的CSS selector engine,官网见https: ...

  9. JavaScript 基本类型值-Number类型

    ▓▓▓▓▓▓ 大致介绍 在JavaScript的内部采用IEEE754格式来表示数字,所以不区分整数和浮点数,都是用64位浮点数的形式储存.就是说,在JavaScript内部,就根本没有小数.但是有些 ...

  10. 分布式配置管理--百度disconf搭建过程和详细使用

    先说官方文档:http://disconf.readthedocs.io/zh_CN/latest/index.html 不管是否要根据官方文档来搭建disconf,都应该看一下这一份文档.精炼清晰地 ...