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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
PHP扩展开发入门教程
2015/02/26 PHP
php显示时间常用方法小结
2015/06/05 PHP
php实现留言板功能
2017/03/05 PHP
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
详解Vue依赖收集引发的问题
2019/04/22 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
python tornado修改log输出方式
2019/11/18 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
杭州时比特电子有限公司SQL
2013/08/22 面试题
升职自荐信范文
2013/10/05 职场文书
工作疏忽检讨书
2014/01/25 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
承租经营合作者协议书
2014/10/01 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
辞职信格式范文
2015/05/13 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
升学宴祝酒词
2015/08/11 职场文书
高中生物教学反思
2016/02/20 职场文书
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python
React更新渲染原理深入分析
2022/12/24 Javascript