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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 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二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
python删除文本中行数标签的方法
2018/05/31 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
如何写毕业求职自荐信
2013/11/06 职场文书
医学专业毕业生个人求职信
2013/12/25 职场文书
大学生社团活动总结
2014/04/26 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers