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

最新推荐文章于 2024-09-13 14:29:40 发布

weixin_30912051

最新推荐文章于 2024-09-13 14:29:40 发布

阅读量485

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/lelexiu/p/10239309.html

版权

效果图一：多选

效果图二：选项筛选

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

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