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

效果图一：多选

效果图二：选项筛选

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

<!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）的更多相关文章

前端 HTML form表单标签 select标签 option 下拉框
<select></select> select里面通常跟option配合使用 <!DOCTYPE html> <html lang="en&quo ...
使用jquery-combobox实现select下拉框多选之后，如何将下拉框的值传给input隐藏域
我在之前的一篇博文中eaeyui-combobox实现组合查询(即实现多个值得搜索)地址:http://www.cnblogs.com/dushan/p/4778897.html 实现了select下 ...
自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HTforWeb通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个 ...
由于抽签HT For Web ComboBox下拉框组件
传统HTML5的下拉框select仅仅能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅可以实现传统HTML5下拉框效果,并且可以在文本框和下拉列表中加入自己定义的小图标, ...
query多选下拉框插件 jquery-multiselect(修改)
其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用这2个的介 ...
MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框
1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证一个是利用(MVC ...
MVC实现多选下拉框,保存并显示多选项
在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...
Android学习使用基本界面组件（下拉框，单选框，复选框，数字转轮，滚动条）
(一)建立单选框按钮 RadioGroup和RadioButton建立单选框按钮字符串资源文件: <resources> <string name="app_name&q ...
jq插件又来了，模拟select下拉框，支持上下方向键哦
好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...

随机推荐

HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）
一.回顾内容前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
python 进阶篇函数装饰器和类装饰器
函数装饰器简单装饰器 def my_decorator(func): def wrapper(): print('wrapper of decorator') func() return wrapp ...
Java 多线程 -- 协作模型：生产消费者实现方式一：管程法
多线程通过管程法实现生产消费者模式需要借助中间容器作为换从区,还包括生产者.消费者.下面以蒸馒头为列,写一个demo. 中间容器: 为了防止数据错乱,还需要给生产和消费方法加锁并且生产者在容器写满的 ...
对JavaScript中原型及原型链的理解
什么是原型: 1,我们所创建的每一个函数,解析器都会向该函数对象添加一个属性prototype,这个属性指向一个对象,这个对象就是我们所谓的原型对象 2,如果我们将函数作为普通函数调用时,proto ...
使用sqlmap结合dnslog快速注入
0x01 起因实际项目中遇到一个oracle延时注入,需要获取数据,几十个库几百张表,等找到关键数据不知道要到哪天. 测试支持带外请求于是想用使用sqlmap利用DNS进行OOB注入 0x02 阿 ...
web--ajax--json
案例: 其中,用eval()解析的话,如果json有一些代码,如:{"age":"alert(你好)"},他也会帮你实行,而JOSN.parse();则会自动报 ...
vagrant + 宝塔环境搭建遇到的一些问题
1.js时间戳单位为毫秒,php时间戳为秒. 2.tp里的where()方法如果where("id=".$id)不能用的话就用数组形式的:where(array("id& ...
2019-2020-1 20199326《Linux内核原理与分析》第二周作业
本周总结:本周的学习内容主要是庖丁解牛Linux的第一章,然后看完书后,又跟着云班课加深学习了一下第一章的内容.第一章主要讲述了linux里的汇编指令的一些指令,比如movl,pushl,popl等等 ...
ansible的剧本play（四）
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA68AAAETCAYAAADZDzDOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjw
POJ3460 Booksort
飞来山上千寻塔,闻说鸡鸣见日升. 不畏浮云遮望眼,自缘身在最高层.--王安石题目:Booksort 网址:http://poj.org/problem?id=3460 Description The ...

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

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

随机推荐

热门专题