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 相关文章推荐
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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获取ajax的headers方法与内容实例
2017/12/27 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
JS中的Replace方法使用经验分享
2015/05/20 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
vue interceptor 使用教程实例详解
2018/09/13 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Python入门必须知道的11个知识点
2018/03/21 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
Python如何对齐字符串
2020/07/30 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
英国网上超市:Ocado
2020/03/05 全球购物
护士实习鉴定范文
2013/12/22 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
物理力学求职信
2014/02/18 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
课外访万家心得体会
2014/09/03 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js