下拉菜单插件bootstrap-selected 的简单应用详解编程语言

 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 

 div 

 label 选择用户： /label 

 div 

 select id="select" name="select" 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);//动态刷新

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

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/16877.html