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 ...
随机推荐
- C#npoi导出excel一些自己的看法
之前转过一篇类似的文章,那个是用C#自带的excel类操作Excel的,还有一种在c#上操作excel的方法便是npoi了,npoi是poi的C#版本. npoi操作excel有两种形式,一种是hss ...
- 矢量切片(Vector tile)
说明:本月的主要工作都是围绕制作矢量切片这一个核心问题进行的,所以2月的主题就以这个问题为主,目前分支出来的一些内容主要包括了TMS(Tile map service),OpenLayers3中的Pr ...
- Swift 2.0 单例的用法
单例我们项目中是很常用的,今天刚学了在swift中怎么写单例和调用单例.下面我们简单的介绍一下.我们先看看Swift单例的写法: import UIKit class Shareinstance: N ...
- 关于H5里的API,上传图片预览功能
FileReader:读取本地图片文件并显示 写在开头 之前公司要求做一个H5页面,功能是照相和选择相册相片,并且能在屏幕上预览.然后我就傻里吧唧的各种找插件,因为有些插件不适配手机的型号,安卓机基本 ...
- TCP详解
1. 数据进入协议栈的封装过程 2. TCP连接的三次握手 3. TCP连接的三次握手和关闭时的四次握手 各个状态的意义如下: LISTEN - 侦听来自远方TCP端口的连接请求: SYN-SENT ...
- Asp.net mvc 4.0 高级编程 百度云下载
Asp.net mvc 4.0 高级编程 百度云下载地址:链接:http://pan.baidu.com/s/1o6zFvOe 密码:xyss 1.基于 ASP.NET MVC4.0 + WebAPI ...
- Linux 搭建Zookeeper集群
1.使用root创建zookeeper用户: useradd zookeeper: passwd zookeeper; 2.登录zookeeper用户,将下载的zookeeper-3 ...
- [前言] 实现一个Android电子书阅读APP
大家好,我是小方,我将在接下来的几篇文章中从零实现一个网络小说阅读器,从安卓编程最基础的部分讲起,直至成功完成我们的应用,从新建一个项目开始,不断添加新的代码,添加新的界面,循序渐进,涵盖所有我们需要 ...
- PHP学习笔记之PDO
1. 何为PDO? PDO(PHP数据对象) 是一个轻量级的.具有兼容接口的PHP数据连接拓展,是一个PHP官方的PECL库,随PHP 5.1发布,需要PHP 5的面向对象支持,因而在更早的版本上无法 ...
- MES设备支持快速完工
1) 在菜单界面点击指定快速键 2) 初始界面 3) 一般流程 a) 扫描任务单号,即可完成工序加工 a1) 获取任务单工序的条件 按任务单卡号或配模的模具卡号搜索行状态为O的工序 a2) 工序完工操 ...