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 ...
随机推荐
- 【noip 2009】 乌龟棋 记忆化搜索&动规
题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家控制一个乌龟棋子从起 ...
- Exception in thread "main" org.hibernate.HibernateException: save is not valid without active transaction
在spring4+hibernate4整合过程中,使用@Transactional注解事务会报"Exception in thread "main" org.hibern ...
- (3)activiti流程的挂起和激活
有时候,我们需要对一个已经执行的流程进行暂停,而不是删除它,这个时候就需要我们调用activiti暂停和激活的api来操作他们 每启动一个流程实例,都会在该流程实例下产生相应的流程任务,处于1*多的关 ...
- C语言memset学习
#include <stdio.h> #include <memory.h> ]); //函数声明 void main(){ ]={{,,},{,,},{,,},{,,}};/ ...
- 小机器人自动回复(python,可扩展开发微信公众号的小机器人)
api来之图灵机器人.我们都知道微信公众号可以有自动回复,我们先用python脚本编写一个简单的自动回复的脚本,利用图灵机器人的api. http://www.tuling123.com/help/h ...
- SpringMVC简版教程、部分功能
注:本文只用注解来实现 前言 SpringMVC各种流程图流程图(其他的各种流程图) jsp.xml.action彼此之间的关系,都如何使用 spring-mvc.xml如何配置,放在哪里? acti ...
- BZOJ 1875: [SDOI2009]HH去散步(矩阵乘法)
首先,题意就把我们引向了矩阵乘法,注意边长m<=60,那么就按边建图,变成一个120个点的图,然后乱搞就行了。 PS:WA了N久改了3次终于A了QAQ CODE: #include<cst ...
- jQuery源码学习:Sizzle
本文所有讨论均基于jQuery版本3.1.1,官网http://jquery.com/. 一 简介 Sizzle是用javascript实现的CSS selector engine,官网见https: ...
- JavaScript 基本类型值-Number类型
▓▓▓▓▓▓ 大致介绍 在JavaScript的内部采用IEEE754格式来表示数字,所以不区分整数和浮点数,都是用64位浮点数的形式储存.就是说,在JavaScript内部,就根本没有小数.但是有些 ...
- 分布式配置管理--百度disconf搭建过程和详细使用
先说官方文档:http://disconf.readthedocs.io/zh_CN/latest/index.html 不管是否要根据官方文档来搭建disconf,都应该看一下这一份文档.精炼清晰地 ...