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的无缝循环新闻列表插件
Mar 07 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
vue之数据交互实例代码
Jun 16 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 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更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
use jscript List Installed Software
2007/06/11 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
python中xrange和range的区别
2014/05/13 Python
python采集博客中上传的QQ截图文件
2014/07/18 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python 下载及安装详细步骤
2019/11/04 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
美国校园市场:OCM
2017/06/08 全球购物
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
什么是唯一索引
2015/07/05 面试题
手术室护士长竞聘书
2014/03/31 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
通报表扬范文
2015/01/17 职场文书
保外就医申请书范文
2015/08/06 职场文书
转变工作作风心得体会
2016/01/23 职场文书
javascript函数式编程基础
2021/09/15 Javascript
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫