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 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 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 has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
newxtree.js代码
2007/03/13 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
浅析Ajax语法
2016/12/05 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
详解爬虫被封的问题
2019/04/23 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
车间安全生产管理制度
2015/08/06 职场文书
超市店长竞聘书
2015/09/15 职场文书
SQL注入详解及防范方法
2021/12/06 MySQL