jQuery实现Select下拉列表进行状态选择功能


Posted in jQuery onMarch 30, 2017

场景:

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 相关文章推荐
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
jquery插件实现图片悬浮
Apr 16 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
基于jquery实现二级联动效果
Mar 30 #jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 #jQuery
如何编写jquery插件
Mar 29 #jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 #jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 #jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 #jQuery
You might like
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
php多线程并发实现方法
2016/09/30 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
二级域名转向类
2006/11/09 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
Java Varargs 可变参数用法详解
2020/01/28 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python连接DB2数据库
2016/08/27 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
法人代表证明书范本
2015/06/18 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
关于python中模块和重载的问题
2021/11/02 Python