效果图一：多选

效果图二：选项筛选

最后奉献源码，复制出来直接可用

<!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>&nbsp

                    <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] + "&nbsp&nbsp<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] + "&nbsp&nbsp<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] + "&nbsp&nbsp<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>

前端组件：支持多选，支持选项筛选的下拉框选择器（基于Jquery和Bootstrap）的更多相关文章

  1. 前端 HTML form表单标签 select标签 option 下拉框

    <select></select> select里面通常跟option配合使用 <!DOCTYPE html> <html lang="en&quo ...

  2. 使用jquery-combobox实现select下拉框多选之后，如何将下拉框的值传给input隐藏域

    我在之前的一篇博文中eaeyui-combobox实现组合查询(即实现多个值得搜索)地址:http://www.cnblogs.com/dushan/p/4778897.html 实现了select下 ...

  3. 自绘制HT For Web ComboBox下拉框组件

    传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HTforWeb通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个 ...

  4. 由于抽签HT For Web ComboBox下拉框组件

    传统HTML5的下拉框select仅仅能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅可以实现传统HTML5下拉框效果,并且可以在文本框和下拉列表中加入自己定义的小图标, ...

  5. query多选下拉框插件 jquery-multiselect(修改)

    其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...

  6. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  7. MVC实现多选下拉框,保存并显示多选项

    在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...

  8. Android学习使用基本界面组件（下拉框，单选框，复选框，数字转轮，滚动条）

    (一)建立单选框按钮 RadioGroup和RadioButton建立单选框按钮 字符串资源文件: <resources> <string name="app_name&q ...

  9. jq插件又来了，模拟select下拉框，支持上下方向键哦

    好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...

随机推荐

  1. java面试题（一年工作经验）的心得

    看面试题 正常人第一步肯定都会看面试题,我也不例外,在看的过程中,我发现有些文章写的不错,对我帮助不小值得推荐,如下: Java面试题全集(上) 很多基础的东西,建议先看. 各大公司Java后端开发面 ...

  2. [html][javascript] 关于SVG环形进度条

    下面是个例子: <style> .demo2{ transform-origin: center; transform: rotate(-90deg); transition: strok ...

  3. redis： 乐观锁（十）

    监视:watch 正常业务(单线程): 127.0.0.1:6379> set money 100 #模拟存款100元 OK 127.0.0.1:6379> set moneyout 0 ...

  4. 微信小程序基本知识

    逻辑实现 1 使用动态数据展示列表(可以考虑使用wx:for属性配合动态数组渲染全部列表项,以减少WXML页面的代码量) eg:  <view class='listGroup' wx:for= ...

  5. TensorFlow keras读取图片

    from tensorflow.python.keras.preprocessing.image import load_img,img_to_array def main(): #tagert_si ...

  6. windows下部署.netcore+docker系列四 （部署程序，重点就要来了）

    前面的都是为这章做准备,加油把骚年们 PS:C# 项目可以按照流程一步步来,java 偶然其他的可以找下其他的网上资源 1.在 VS2019中 添加docker 支持 (其实也就是追加一个Docker ...

  7. Web前端开发必不可少的9个开源框架

    大多数人想到Web开发时,通常会想到HTML或JavaScript,往往忽略了CSS,根据Wikipedia的说法,CSS既是网页中最重要也是最常被遗忘的部分之一,尽管它是万维网的三大基础技术之一. ...

  8. openssl查看证书细节 [转载]

    openssl x509部分命令 打印出证书的内容: openssl x509 -in cert.pem -noout -text 打印出证书的系列号 openssl x509 -in cert.pe ...

  9. latex-列表环境

    介绍 latex 主要有三种列表环境,进行罗列的实现, 无序列表 -- itemize 有序列表 -- enumerate 描述列表 -- description 本文进行了一一介绍和演示, 同时添加 ...

  10. c++ 如何开N次方？速解

    c++ 如何开N次方?速解   直接上代码 #include <iostream> #include <cmath> using namespace std; typedef ...