下拉菜单插件bootstrap-selected 的简单应用

最新推荐文章于 2025-09-10 15:46:06 发布

weixin_34221773

最新推荐文章于 2025-09-10 15:46:06 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

文章标签： ui 后端 javascript ViewUI

原文链接：http://www.cnblogs.com/yinshuai/p/8385319.html

本文介绍如何使用Bootstrap Select插件创建美观的选择框。通过引入必要的文件，并设置HTML结构及JavaScript初始化代码，实现包括多选、搜索及全选等功能。文章还提供了动态渲染Select元素的方法。

1因为这是一个基于bootstrap的插件所以需要引入如下文件：

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>

注意：bootstrap-select文件要在bootstrap后面引入

没有文件的可以再这里下载网盘：链接: https://pan.baidu.com/s/1eTIFdQU 密码: c7ui

html代码：

<div class="col-sm-6 col-sm-offset-3" style="margin-top: 200px;">
    <div class="row">
        <label class="col-sm-3 control-label" style="line-height: 34px;margin-bottom: 20px;">选择用户：</label>
        <div class="col-sm-6">
            <select id="select" name="select" class="selectpicker show-tick form-control" multiple data-live-search="true" data-actions-box="true">
            　　<option value="苹果">苹果</option>
            　　<option value="菠萝">菠萝</option>
            　　<option value="香蕉">香蕉</option>
            　　<option value="火龙果">火龙果</option>
            　　<option value="梨子">梨子</option>
            　　<option value="草莓">草莓</option>    
            　　<option value="哈密瓜">哈密瓜</option>
            　　<option value="椰子">椰子</option>
            　　<option value="猕猴桃">猕猴桃</option>
            　　<option value="桃子">桃子</option>
            </select>
        </div>
    </div>
</div>

js代码：

$(window).on('load', function () {
     $('.selectpicker').selectpicker();
        
});

这样就可以了效果是这样的：

这是英文的如果想要中文的只需要引入一个js：

<script src="js/defaults-zh_CN.min.js"></script>

在我上面的网盘文件里都有加了之后效果是这样的：

现在咱们说一下 select标签上的类和属性的作用：

　　1、show-tick 会在你选择的每个选项后面打一个对号

　　2、form-control 就是bootstrap的样式没什么用

　　3、属性 multiple 毫无疑问就是多选的意思

　　4、属性 data-live-search="true" 一看到search 没错就是下面那个搜索框

　　5、属性 data-actions-box="true" 全选，取消全选

以上这几个类和属性添加就有不加就没有。

* 获取选中的值更简单：

$("#select").val();

如果你想动态渲染select 我写了一段js：

// res是从后端返回的数据 
var res = {
　　account_arr:[
         '苹果',
         '柿子',
         '香蕉',
         '橙子',
         '草莓',
         '桃子',
         '菠萝',
         '火龙果']
        }
 var str = "";
 //res.account_arr是你从接口接收到的那个数组
 for (var i = 0; i < res.account_arr.length; i++){
     str += '<option value="'+ res.account_arr[i] +'">'+ res.account_arr[i] +'</option>'
 }
 $(".selectpicker").html(str);
 $('.selectpicker').selectpicker('refresh');//动态刷新