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

最新推荐文章于 2024-08-24 20:20:19 发布

ngx171

最新推荐文章于 2024-08-24 20:20:19 发布

阅读量1.5k

点赞数

文章标签： select 可以搜索的select

本文链接：https://blog.csdn.net/qq_28779275/article/details/78932863

版权

在做项目的时候需要用到可以搜索的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());
});