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

简介: 【BootStrap】关于Select下拉框选择触发事件以及扩展

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: 设置或返回下拉列表中被选项目的索引号。


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

效果如图:

image.png



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

<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);
}


效果图如下:

image.png

其他方法,请自己尝试哦。

目录
相关文章
|
5月前
|
前端开发 JavaScript CDN
【干货】通过Bootstrap框架添加下拉框到导航栏
【干货】通过Bootstrap框架添加下拉框到导航栏
|
前端开发
Bootstrap切换tab事件
Bootstrap切换tab事件
120 0
|
前端开发
Bootstrap 下拉菜单事件
Bootstrap 下拉菜单事件
|
缓存 负载均衡 网络协议
Bootstrap 协议的说明和扩展
BOOTP 协议的某些方面在其原始规范中的定义相当松散。特别是对“BOOTP中继代理/BOOTP relay agents”(原名BOOTP转发代理)的行为只做了一般性的描述,客户端的行为描述也受到了一定的影响,本备忘录试图澄清和加强这些方面的规范。由于编辑过程中在 RFC 1532 中引入了一些错误,本备忘录重新发布为 RFC 1542。
577 0
Bootstrap 协议的说明和扩展
|
前端开发 开发者 容器
Bootstrap-栅格系统-扩展|学习笔记
快速学习 Bootstrap-栅格系统-扩展
112 0
Bootstrap-栅格系统-扩展|学习笔记
|
编解码 移动开发 前端开发
【JQuery】扩展BootStrap入门——知识点讲解(一)
本期主要介绍扩展BootStrap入门——知识点讲解(一)
144 0
【JQuery】扩展BootStrap入门——知识点讲解(一)
|
前端开发 JavaScript iOS开发
【JQuery】扩展BootStrap入门——知识点讲解(二)
本期主要介绍扩展BootStrap入门——知识点讲解(二)
132 0
【JQuery】扩展BootStrap入门——知识点讲解(二)
|
JSON 前端开发 数据格式
bootstrap-table 前端分页,刷新事件代码实例
function renderIssueTable(){ $('#issueTable').bootstrapTable({ detailView: false,//父子表 //分...
1274 0
|
JavaScript 前端开发
关于bootstrap下拉框组件点击后不自动关闭的处理
我们在使用bootstrap下拉框组件时,有时会有如下需求,比如,下拉框中有分页的需求,如果你点击翻页时那下拉框会自动关闭,再打开下拉框又会重新刷新,这肯定是不满足条件的。所以就会有点击后不关闭的需求。
2484 0