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

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

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

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

html代码：

    

        选择用户：
        

            
            　　苹果
            　　菠萝
            　　香蕉
            　　火龙果
            　　梨子
            　　草莓    
            　　哈密瓜
            　　椰子
            　　猕猴桃
            　　桃子
            
        
    
                                    

js代码：

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

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

 

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

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

现在咱们说一下 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 += ''+ res.account_arr[i] +''
 }
 $(".selectpicker").html(str);
 $('.selectpicker').selectpicker('refresh');//动态刷新

帮一个朋友弄得 只用到了这些 基本上可以满足一般的需求，需要更多的话，请看 http://silviomoreto.github.io/bootstrap-select/

 

---------------------------------------------------------------------------------------------------------------------------------------------------

原文地址: https://www.cnblogs.com/yinshuai/p/8385319.html