【BootStrap】关于Select下拉框选择触发事件以及扩展
2016-11-22 00:47
651 查看
转载请注明出处:http://blog.csdn.net/qq_26525215
本文源自【大学之旅_谙忆的博客】
Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项。
这个很好解决:
如下:
JS:
这里利用的就是onchange和selectedIndex。
onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。
selectedIndex: 设置或返回下拉列表中被选项目的索引号。
这样,在我们改变选项时就会触发改事件。
效果如图:
这样做,我们只能获得选中哪项,而如果我们选中哪项,需要传递特殊的信息,这个时候该怎么办呢。
也就是说,我在选中的同时,想获得那个value值,这个时候怎么做。
这里只用一种方法实现,其他的方法应该还有很多。
效果图如下:
其他方法,请自己尝试哦。
本文章由[谙忆]编写, 所有权利保留。
转载请注明出处: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
本文源自【大学之旅_谙忆的博客】
相关文章推荐
- BootStrap中关于Select下拉框选择触发事件及扩展
- BootStrap中关于Select下拉框选择触发事件及扩展
- BootStrap中关于Select下拉框选择触发事件及扩展
- 关于select下拉框选择触发事件
- 基于jQuery的select下拉框选择触发事件实例分析
- 关于select 被选中触发事件,onclick事件失效问题
- SELECT下拉选择框中滚轮事件的禁用.
- 关于radio单选触发事件以及获取值
- SELECT下拉选择框中滚轮事件的禁用.
- HTML Select 标签选择后触发jQuery事件代码实例
- ajaxToolkit:AutoCompleteExtender 的触发选择事件以及JSON序列化和使用键值对
- 关于FileUpload控件选择文件时触发显示图像事件在IE7以上版本中不显示的问题
- Select下拉框动态获取数据,并触发事件
- easyui 绑定下拉框,下拉框选择改变事件的触发方法
- Bootstrap系列 -- 15. 下拉选择框select
- ajaxToolkit:AutoCompleteExtender 的触发选择事件以及JSON序列化和使用键值对
- ExtJS4 ComboBox选择第一个选项时不能触发select事件的处理
- 关于短信的读取以及新短信到达时如何触发事件去处理自己的逻辑
- 关于EasyDropDown的选择select事件问题
- select选择option时触发的click事件google不兼容问题