开发者社区> 谙忆> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项。
+关注继续查看

转载请注明出处:http://blog.csdn.net/qq_26525215

本文源自大学之旅_谙忆的博客

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

这样,在我们改变选项时就会触发改事件。
效果如图:

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

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

效果图如下:

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

本文章由[谙忆]编写, 所有权利保留。

转载请注明出处:http://blog.csdn.net/qq_26525215

本文源自大学之旅_谙忆的博客

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
vue中select的option默认选中项的问题解决方案
vue中select的option默认选中项的问题解决方案
0 0
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
Element-ui中 表格(Table)组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
0 0
iview的table 组件展开事件能否绑定到其他事件上?看这里!
iview的table 组件展开事件能否绑定到其他事件上?看这里!
0 0
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
0 0
【mpvue】列表项组件事件前10个触发正常,后面的组件触发不正常
1、问题描述 父级列表页,将列表项做成自定义组件ItemList,监听子组件的click事件,获取当前子组件实例所在数组的索引值。 发现前10个子组件实例触发click时,console.log能正确输出该组件所在数组的索引值,但是后续的子组件实例触发click时输出的并非该组件所在数组的索引值。 下面是控制台打印的内容:
0 0
【BootStrap】关于Select下拉框选择触发事件以及扩展
【BootStrap】关于Select下拉框选择触发事件以及扩展
0 0
EasyUI combobox选中项变化事件存在的问题
本文目录 1. 背景 2. 写法 3. 实际存在的问题
0 0
bootstrap-table 前端分页,刷新事件代码实例
function renderIssueTable(){ $('#issueTable').bootstrapTable({ detailView: false,//父子表 //分...
779 0
select 下拉框的选中项的change事件
HTML文件 类      型:   安心帮卖 同步拍 拍卖会场次:  ...
801 0
jquery 控制 select 选中
转载的,需要在明确的位置标明转载出处: http://blog.csdn.net/happyflyingave/article/details/29586767 惯例: 我是温浩然: 先说需求: 后台传过,年,月,周,三个属性。在前台页面为选择框形式。 想用jquery控制,根据后台传值判断选中相等。 代码如下: $('#stage-main-content').on('cl
690 0
+关注
谙忆
GitHub: https://github.com/chenhaoxiang
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载