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 23 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery实现计算器功能
Oct 19 jQuery
jquery插件实现图片悬浮
Apr 16 jQuery
jquery插件实现悬浮的菜单
Apr 24 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新手上路(九)
2006/10/09 PHP
PHP 金额数字转换成英文
2010/05/06 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
python语言使用技巧分享
2016/05/31 Python
python3中zip()函数使用详解
2018/06/29 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
python如何更新包
2020/06/11 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
财务部岗位职责
2013/11/19 职场文书
党员培训思想汇报
2014/01/07 职场文书
先进个人事迹材料
2014/01/25 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
CAD实训总结范文
2015/08/03 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
女性励志书籍推荐
2019/08/19 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL