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实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 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在特殊字符前加斜杠的实现代码
2011/07/17 PHP
深入apache host的配置详解
2013/06/09 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
设定php简写功能的方法
2019/11/28 PHP
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
Python pass 语句使用示例
2014/03/11 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python下载网络小说实例代码
2018/02/03 Python
python join方法使用详解
2019/07/30 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
python设置表格边框的具体方法
2020/07/17 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
python中Mako库实例用法
2020/12/31 Python
String和StringBuffer的区别
2015/08/13 面试题
办公室文员岗位职责范本
2014/06/12 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书