bootstrap筛选下拉框
2019-07-30 11:57
1126 查看
<div class="btn-group"> <button class="hj-btn dropdown-toggle" data-toggle="dropdown">筛选 <i class="fa fa-angle-down icon-on-right"></i> </button> <div class="dropdown-menu" style="width: 350px;left: 10px;padding: 10px;line-height: 26px"> <div class="form-group clearfix"> <label class="control-label col-sm-3 text-nowrap">业务日期</label> <div class="col-sm-9 col-xs-9"> <input type="text" class="hj-input" value="" id="" readonly style="width: 80px"/> <span class="hj-label" style="margin: 0 5px">至</span> <input type="text" class="hj-input" value="" id="" readonly style="width: 80px"/> </div> </div> <div class="form-group m-t-xs clearfix"> <label class="control-label col-sm-3 text-nowrap">物资分类:</label> <div class="col-sm-9 col-xs-9"> <select class="hj-select" name="classification" style="width: 180px"> </select> </div> </div> <div class="form-group m-t-xs clearfix"> <label class="control-label col-sm-3 text-nowrap">盘点状态:</label> <div class="col-sm-9 col-xs-9"> <select class="hj-select" name="state" style="width: 180px"> </select> </div> </div> <div class="form-group m-t-xs clearfix"> <label class="control-label col-sm-3 text-nowrap">库存数量:</label> <div class="col-sm-9 col-xs-9"> <select class="hj-select" name="quantity" style="width: 180px"> </select> </div> </div> <div class="form-group m-t-xs clearfix"> <input type="checkbox" name="isZero" class="hj-checkbox" style="margin-left: 10px!important;"/> <span class="hj-label">不显示零库存物资</span> </div> <div class="form-group"> <div class="col-xs-12 text-center"> <button class="sure btn btn-info">确定</button> </div> </div> </div> </div>
因事件冒泡会出现bug,点击弹出下拉框会直接消失,影响筛选框中的其他功能
解决办法:
//点击确定按钮隐藏筛选框 $(".dropdown-menu").click(function (e) { var type = $(e.target).attr('name'); console.log(type); if(type === "sure"){ //点击确定按钮 }else { e.stopPropagation(); } });
相关文章推荐
- bootstrap 显示下拉框
- 获取DataGridView绑定BindingSource的数据表,并根据树控件点击进行筛选数据表,下拉控件自定义排序问题初步解决方法,解决了该行属于另一个表的错误提示.
- 基于bootstrap的双选择下拉框前端插件doublebox相关介绍
- Excel下拉列表与数据筛选
- 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用
- bootstrap的多选下拉框的使用
- bootstrap下拉分页样式 带跳转页码
- bootstrap如何让dropdown menu按钮式下拉框长度一致
- 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用
- Bootstrap学习 下拉列表
- bootstrap中下拉组件没反应
- 支持中文/全拼/简拼以及自定义筛选的下拉列表
- Bootstrap3基础 dropdown divider 下拉列表中的分割线
- bootstrap select插件 下拉框 、复选框 、使用详解、附.重置 bootstrap-select下拉框复选框中的值/easyui树的复选框中的值。
- 非常轻量级的下拉筛选菜单ZBDownMenuView
- BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
- 前端插件Bootstrap之下拉选学习(一)
- Bootstrap下拉实时后台搜索功能
- AngularJs + bootstrap实现下拉选择框
- 使用bootstrap实现下拉框绑定多选框