效果图一：多选

效果图二：选项筛选

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

<!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. CSS 中的伪类和伪元素

    伪类(Pseudo classes) 由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式.由此可以看出,它的功能和 class 有些类似, ...

  2. Hadoop的下载和安装

    Hadoop的下载和安装 一:Hadoop的简介 Apache的Hadoop是一个开源的.可靠的.可扩展的系统架构,可利用分布式架构来存储海量数据,以及实现分布式的计算. Hadoop许使用简单的编程 ...

  3. 设计模式 - 迭代器模式详解及其在ArrayList中的应用

    基本介绍 迭代器模式(Iterator Pattern)是 Java 中使用最多的一种模式,它可以顺序的访问容器中的元素,但不需要知道容器的内部细节 模式结构 Iterator(抽象迭代器):定义遍历 ...

  4. Spring MVC 中的http Caching

    文章目录 过期时间 Last-Modified ETag Spring ETag filter Spring MVC 中的http Caching Cache 是HTTP协议中的一个非常重要的功能,使 ...

  5. 基于jenkins自动打包并部署docker环境

    一.实验环境 git                      192.168.200.71 jenkins    192.168.200.72 docker               192.16 ...

  6. docker中安装nginx，部署前端代码

    最近在学习docker,初次接触,难免遇到磕磕碰碰,遂将其整理成博客,以便日后查看. 1.拉取nginx镜像 直接从官方镜像库拉取简单粗暴: docker pull nginx 2.运行 docker ...

  7. 已有项目接入git远程仓库

    1.项目根目录初始化git仓库 git init 2.将本地项目与远程仓库关联(首先得在远程创建一个代码仓库) git remote add origin 远程仓库地址 诺,仓库地址就是这个玩意 3. ...

  8. CentOS配置Tomcat监听80端口,虚拟主机

    2019独角兽企业重金招聘Python工程师标准>>> Tomcat更改默认端口为80 更改的配置文件是: /usr/local/tomcat/conf/server.xml [ro ...

  9. 2016年全球IC设计大厂营收排名：高通稳居龙头

    TrendForce旗下拓墣产业研究所最新研究统计,2016年全球前十大无晶圆IC设计业者营收中,高通(QCT)仍然稳居龙头宝座.而前三大业者高通.新博通(Broadcom)与联发科合计营收占前十名营 ...

  10. AngularJS学习1-基础知识

    Angular并不是适合任何应用的开发,Angular考虑的是构建CRUD应用 但是目前好像也只是用到了angular的一些指令,数据绑定,mvc,http服务而已..... 以前传统的做法就是,通过 ...