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

带搜索的js下拉菜单(bootstrap按钮式)

2017-12-29 16:28 543 查看

在做项目的时候需要用到可以搜索的select菜单，用过bootstrap-select ，不过由于项目需求是动态添加的下拉菜单，插件不太满足，所以自己写了一个。在这里分享下。

html:部分

<html>
<meta charset="utf-8">
<link rel="stylesheet" href="./V2/OA/Public/css/bootstrap.min.css">

<div class="btn-group">
<button type="button" id="web" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">发布网站
<span class="caret"></span>
</button>
<ul class="dropdown-menu ngxSelect" bindId="web" bindValueId="webid" role="menu">
<span><input type='text'></span>
<li><a data-val="1" href="#">功能</a></li>
<li><a data-val="2" href="#">另一个功能</a></li>
<li><a data-val="3" href="#">其他</a></li>
</ul>
<input type="hidden" name="webid" id="webid">
</div>

<script src="./V2/OA/Public/js/jquery-2.0.3.min.js"></script>
<script src="./V2/OA/Public/js/bootstrap.js"></script>
<script src="ngxSelect.js"></script>

</html>

js部分

var ngxId = $('.ngxSelect').attr('bindID');//绑定的id
var valueId = $('.ngxSelect').attr('bindValueId');//绑定的值id

/*-- 实时监测事件 --*/
$(".ngxSelect span input").bind('input propertychange',function () {
var val = $(this).val();
$('.ngxSelect li').attr('style','display:block');
if(val != ''){
$('.ngxSelect li a').each(function (index,ele) {
if($(this).html().indexOf(val) == -1){
$(this).parent().attr('style','display:none');
}
});
}
});

/*-- 改变主体和值 --*/
$('.ngxSelect li a').click(function () {
$('#' + valueId).val($(this).attr('data-val'));
$('#' + ngxId).html($(this).html());
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航