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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
基于jQuery拖拽事件的封装
Nov 29 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
php面向对象重点知识分享
2019/09/27 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
javascript读取RSS数据
2007/01/20 Javascript
javascript 有用的脚本函数
2009/05/07 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
JavaScript实现动态生成表格
2020/08/02 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
学习python (2)
2006/10/31 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
python计算无向图节点度的实例代码
2019/11/22 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
python 爬虫请求模块requests详解
2020/12/04 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
薪酬专员岗位职责
2014/02/18 职场文书
大学生社会实践方案
2014/05/11 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
乒乓球比赛通知
2015/04/27 职场文书
Python OpenGL基本配置方式
2022/05/20 Python