效果图一：多选
效果图二：选项筛选
最后奉献源码，复制出来直接可用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>支持搜索选项和多选的下拉框</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <style> .dropdown-menu { overflow-x: visible; overflow-y: auto; max-height: 300px; } </style> <body> <ul class="nav navbar-nav" > <li class="dropdown" > <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <b>位置:</b>  <label id="selectPosition">选择</label><span class="caret"></span> </a> <ul id="select_item" class="dropdown-menu" > </ul> </li> </ul> </body> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script> //设置搜索选项功能 var all_content = ['上面','aaa','cvb','dgf','gdf','dffh','erte','fdg','fghfg','erte','sdfs','gftjhgj']//选项 var select_item_obj = $("#select_item")//下拉框对象 select_item_obj.empty() select_item_obj.append('<input id="input_search" class="select_search" type="text" class="input-sm" placeholder="搜索">') for (let j = 0; j < all_content.length; j++) { select_item_obj.append("<li class='select_item'><a href='#'>" + all_content[j] + "  <span class='glyphicon glyphicon-ok hidden' ></span></a></li>") } var input_search_obj = $("#input_search")//搜索框对象 //设置下拉框筛选事件 input_search_obj.on("propertychange input ", function () { let search_msg = $(this).val() select_item_obj.children('.select_item').each(function () { $(this).remove() }) if (search_msg != '') { let select_content = [] for (let j = 0; j < all_content.length; j++) { if (all_content[j].toLowerCase().indexOf(search_msg.toLowerCase()) >= 0) { select_content.push(all_content[j]) } } console.log(select_content) for (let j = 0; j < select_content.length; j++) { select_item_obj.append("<li class='select_item'><a href='#'>" + select_content[j] + "  <span class='glyphicon glyphicon-ok hidden' ></span></a></li>") } } else { for (let j = 0; j < all_content.length; j++) { select_item_obj.append("<li class='select_item'><a href='#'>" + all_content[j] + "  <span class='glyphicon glyphicon-ok hidden' ></span></a></li>") } } //将下拉框的值设置为显示的值，由于下拉框处于动态变化，所以必须放在变化最后的位置，才能保证全部的下拉框绑定事件 $('ul.dropdown-menu li.select_item').on('click', function (e) { var ul_obj = $(this).parent() var glyphicon_obj = $(this).children('a').children('span') var glyphicon_class = glyphicon_obj.attr('class') if (glyphicon_class == 'glyphicon glyphicon-ok') { glyphicon_obj.attr('class', 'glyphicon glyphicon-ok hidden') } else { glyphicon_obj.attr('class', 'glyphicon glyphicon-ok') } var label_val = '' ul_obj.find('li').each(function () { var select_falg = $(this).children('a').children('span') var now_obj = $(this) if (select_falg.attr('class') == 'glyphicon glyphicon-ok') { label_val += $.trim(now_obj.text()) + ',' } }) console.log(label_val) if (label_val == '') { label_val = '选择' } $(this).parent().prev().children('label').text($.trim(label_val)) $(this).parent().prev().children('label').val($.trim(label_val)) e.stopPropagation(); }) }) //将下拉框的值设置为显示的值，由于下拉框处于动态变化，所以必须放在变化最后的位置，才能保证全部的下拉框绑定事件 $('ul.dropdown-menu li.select_item').on('click', function (e) { var ul_obj = $(this).parent() var glyphicon_obj = $(this).children('a').children('span') var glyphicon_class = glyphicon_obj.attr('class') if(glyphicon_class=='glyphicon glyphicon-ok'){ glyphicon_obj.attr('class','glyphicon glyphicon-ok hidden') }else{ glyphicon_obj.attr('class','glyphicon glyphicon-ok') } var label_val = '' ul_obj.find('li').each(function () { var select_falg = $(this).children('a').children('span') var now_obj = $(this) if(select_falg.attr('class')=='glyphicon glyphicon-ok'){ label_val += $.trim(now_obj.text())+',' } }) console.log(label_val) if(label_val==''){label_val='选择'} $(this).parent().prev().children('label').text($.trim(label_val)) $(this).parent().prev().children('label').val($.trim(label_val)) e.stopPropagation(); }) //阻断li的点击事件 $(".select_search").on('click', function (e) { e.stopPropagation(); }); </script> </html>
