您的位置:首页 > Web前端 > BootStrap

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();
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: