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

【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

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

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

相关文章
SpringBoot——Thymeleaf中使用th:each遍历数组、List、Map
SpringBoot——Thymeleaf中使用th:each遍历数组、List、Map
52 0
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
931 0
Qt编写自定义控件52-颜色下拉框
一、前言 这个控件写了很久了,元老级别的控件之一,开发之初主要是自己的好几个项目要用到,比如提供一个颜色下拉框设置对应的曲线或者时间颜色,视频监控项目中经常用到的OSD标签设置,这个控件的难度系数接近0,初学者都会,其实网上搜索也很多人提供了绘制的方法,就是枚举QColor::colorNames()拿到所有的内置的颜色,然后生成对应的图片作为icon设置到下拉框的item中去,对应icon的宽高由控件本身的宽高决定,本控件继承自qcombobox控件,完全保留了该控件的所有特性,同时新增了颜色改变信号,以便用户使用。
1034 0
select下拉框
使用select2实现多选select下拉框                                                                                                         多选标签:    ...
1007 0
View的三次measure,两次layout和一次draw
 我在《Android视图结构》这篇文章中已经描述了Activity,Window和View在视图架构方面的关系。前天,我突然想到为什么在setContentView中能够调用findViewById函数?View那时不是还没有被加载,测量,布局和绘制啊。
1190 0
[20141201]SYSSTAT软件包.txt
[20141201]SYSSTAT软件包.txt linux下有一个软件包SYSSTAT。 #  rpm -qi sysstat Name        : sysstat                      Relocations: (not relocatable) Version     : 7.
661 0
正确使用STL-MAP中Erase函数
一切尽在代码中。 #include #include #include using namespace std ; int main(void) { map m ; m.
777 0
+关注
谙忆
GitHub: https://github.com/chenhaoxiang
1453
文章
40
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载