前端组件：支持多选，支持选项筛选的下拉框选择器（基于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 ...

随机推荐

Docker 搭建 ELK 集群步骤
前言本篇文章主要介绍在两台机器上使用 Docker 搭建 ELK. 正文环境 CentOS 7.7 系统 Docker version 19.03.8 docker-compose version ...
php token验证范例
<?php $module = $_GET['module']; $action = $_GET['action']; $token = md5sum($module.date('Y-m-d', ...
SVN部署(Centos7,Ubuntu)
SVN 简介 SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Sub ...
数据结构入门第二课（浙大mooc)
数据结构入门第二课目录数据结构入门第二课引子多项式的表示方法1 顺序结构表示多项式各项方法2 顺序结构表示非零项方法3 链表结构存储非零项多项式问题的启示线性表线性表的抽象数据类型 ...
Qt提示：setLayout: Attempting to set QLayout "" on MainWindow "MainWindow", which already has a layout
如题,出现这个的原因是,如果你的窗口继承的是QMainwindow,需要设置setCentralWidget(); 如下: QWidget * widget = new QWidget ( mainW ...
Merge_Sort
public class Merge_Sort { public static void merge(int a[],int n){ int source; //合并之前数组的大小 int targe ...
java中for循环和while循环，哪个更快？--一道面试题
for的 while的
让pomelo可以获取到反向代理websockets的真实用户IP
/node_modules/pomelo/lib/connectors/hybridsocket.js 找到 var Socket = function(id, socket) { 给remoteAd ...
Binary Index Tree
0 引言 Leetcode307 这道题给一个可变数组,求从$i$到$j$的元素之和. 一个naive的做法是,每次查询都从$i$累加到$j$: class NumArray { pu ...
51 NOD 1049 最大子段和动态规划模板板子 DP
N个整数组成的序列a[1],a[2],a[3],-,a[n],求该序列如a[i]+a[i+1]+-+a[j]的连续子段和的最大值.当所给的整数均为负数时和为0. 例如:-2,11,-4,13,-5,- ...

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

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

随机推荐

热门专题