前言

bootstrap和select2是强大的前端布局样式框架，其低调简约的风格深受人们的好评。本人在平时会制作一些基于bootstrap和select2的定制样式，算是练手吧！如有建议和意见，欢迎评论交流！

样式预览

使用bootstrap和select2制作的带搜索功能的下拉框

如上图所示，1是一个展示框，2是一个下拉框。下拉框内置搜索筛选功能，在下拉框中选中的元素会以标签的形式表现在展示框内。点击展示框内的标签，会删除当前的元素。如下图所示

使用bootstrap和select2制作的带搜索功能的下拉框

设计思路

1.展示框其实是一个div，使用监听事件change()监听下拉框的变化。
2.每当下拉框选中元素时，使用append()在展示框内加入拼接字符串形式的子元素。
3.对子元素的样式进行调整，子元素的文本为获取到的下拉框的value值（text值也可以，看自己需求）。
4.最后使用scrollTop()将展示框始终在最底下（这样做是一方展示框数据过多生成滚动条时，使展示框始终位于最底部，便于查看新增加的标签）

代码

请注意导包！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery-1.11.3.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link href="./css/bootstrap/bootstrap.min.css" rel="stylesheet" />

    <script src="./select2-4.0.5/dist/js/select2.min.js"></script>
    <link href="./select2-4.0.5/dist/css/select2.min.css" rel="stylesheet" />

    <style>
        body {
            background-color: #eee
        }

        .sel_box {
            width: 300px;
            margin: 0 auto;
        }

        .sel_show {
            background-color: #fff;
            width: 300px;
            height: 80px;
            border: 1px solid #aaa;
            border-radius: 5px;
            overflow-y: scroll;
            font-style: normal;
            margin: 5px auto; 
        }

        .show_tag {
            padding: 2px 10px;
            margin:3px 5px;
            display: block;
            height: 25px;
            line-height: 20px;
            color: #333;
            background: #eee;
            text-align: center;
            float: left;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        /* 清除浮动代码 */
        .clearfloat:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
        }

        .clearfloat {
            zoom: 1
        }
    </style>
</head>

<body>
    <div class="sel_box">
        //展示框
        <div class="sel_show clearfloat" id="sel_show">
        </div>
        //下拉框
        <select id="sel_menu" value="" class="form-control">
            <option value=""></option>
                <option value="中国">中国</option>
                <option value="新加坡">新加坡</option>
                <option value="韩国">韩国</option>
                <option value="日本">日本</option>
        </select>
    </div>
    <script>
        //初始化select2下拉框
        $("#sel_menu").select2({
            maximumSelectionLength: 100000000000  //最多能够选择的个数
        });
        //渲染逻辑
        $(function () {
        	//监听下拉框事件
            $("#sel_menu").change(function () {
                //渲染展示框
                $("#sel_show").append("<span class='show_tag' id='show_tag' >" + $("#sel_menu").val() + "</span>").scrollTop(1000000000);  
            });
            //点击删除事件
            //事件委托至document，利用on()给所有未渲染的标签绑定click事件，冒泡传递给document
            $(document).on("click", "#show_tag", function () {
                $(this).remove();
            })
        });


    </script>

</body>

</html>

使用注意事项

1.注意导包，使用到jquery、bootstrap、select2 。
2.使用时注意父元素的tabindex属性，其会占用select2的tabindex=‘0’,导致select2的搜索框无法输入。删掉tabindex属性即可。（父元素为模态框时可能会遇到这个问题）如果删掉tabindex属性不管用，重写enforceFocus方法：$.fn.modal.Constructor.prototype.enforceFocus = function () {}；

使用bootstrap和select2制作的带搜索功能的下拉框

使用bootstrap和select2制作的带搜索功能的下拉框

前言

样式预览

设计思路

代码

代码

使用注意事项

相关推荐