BootStrap中关于Select下拉框选择触发事件及扩展


Posted in Javascript onNovember 22, 2016

Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项。

这个很好解决:

如下:

<div class="page-header">
<div class="form-horizontal">
<div class="control-label col-lg-0">
</div>
<div class="col-lg-2">
<select class="form-control" onchange="selectOnchang(this)">
<option>所有申请商家</option>
<option>待审核商家</option>
<option>未通过审核商家</option>
<option>已通过审核商家</option>
</select>
</div>
</div>

JS:

function selectOnchang(obj){ 
//获取被选中的option标签选项 
alert(obj.selectedIndex);
}

这里利用的就是onchange和selectedIndex。

onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。

selectedIndex: 设置或返回下拉列表中被选项目的索引号。

这样,在我们改变选项时就会触发改事件。

效果如图:

BootStrap中关于Select下拉框选择触发事件及扩展

这样做,我们只能获得选中哪项,而如果我们选中哪项,需要传递特殊的信息,这个时候该怎么办呢。

<div class="page-header">
<div class="form-horizontal">
<div class="control-label col-lg-0">
</div>
<div class="col-lg-2">
<select class="form-control" onchange="selectOnchang(this)">
<option value="all">所有申请商家</option>
<option value="check_pending">待审核商家</option>
<option value="no">未通过审核商家</option>
<option value="yes">已通过审核商家</option>
</select>
</div>
</div>

也就是说,我在选中的同时,想获得那个value值,这个时候怎么做。

这里只用一种方法实现,其他的方法应该还有很多。

function selectOnchang(obj){ 
var value = obj.options[obj.selectedIndex].value;
alert(value);
}

效果图如下:

BootStrap中关于Select下拉框选择触发事件及扩展

以上所述是小编给大家介绍的BootStrap中关于Select下拉框选择触发事件及扩展,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
node.js从数据库获取数据
May 08 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 #Javascript
详解Js模板引擎(TrimPath)
Nov 22 #Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 #Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 #Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 #Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 #Javascript
详解js中Json的语法与格式
Nov 22 #Javascript
You might like
php采集时被封ip的解决方法
2010/08/29 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
jQuery示例收集
2010/11/05 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
python中对list去重的多种方法
2014/09/18 Python
pytorch中图像的数据格式实例
2020/02/11 Python
python 生成器需注意的小问题
2020/09/29 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
网络管理员岗位职责
2014/03/17 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
项目转让协议书
2014/10/27 职场文书
婚宴父亲致辞
2015/07/27 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
详解Java实现数据结构之并查集
2021/06/23 Java/Android
Javascript之datagrid查询详解
2021/09/15 Javascript
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server