可以搜索的下拉菜单bootstrap

　　在做项目的时候需要动态添加一个下拉菜单，用selectpicker就不能满足了，所以自己利用bootstrap写了一个在这里简单分享一下。

效果如下

 

话不多说，直接贴代码

 

1、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>
2、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());
});



 

posted @ 2018-03-15 21:53  ngx171  阅读(349)  评论(0)    收藏  举报