Bootstrap-select多选下拉框插件

原创 Laughing  2017-07-24 21:58  阅读 134 次 评论 1 条

这个下拉框支持多选,而且是bootstrap风格,做出来的东西也比较美观。大家可以先看一下下面的演示图片。个人感觉还是很美的。近期抽时间回多多学习一下这个插件的使用。

使用方法

先附上一个官网的地址,感兴趣的可以去看一下

[box style="tip"]
需要引入的js以及css
[/box]

  1. <!-- Latest compiled and minified CSS -->  
  2. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">  
  3.   
  4. <!-- Latest compiled and minified JavaScript -->  
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>  
  6.   
  7. <!-- (Optional) Latest compiled and minified JavaScript translation files -->  
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>  

简单的使用

  1. <select id="selectpicker1" class="selectpicker form-control" multiple data-live-search="false">  
  2. <option value="0">苹果</option>  
  3. <option value="0">菠萝</option>  
  4. <option value="0">香蕉</option>  
  5. <option value="0">哈密瓜</option>  
  6. </select>  

[box style="info"]
获取值
[/box]
$("#XXX").val()

[box style="alert"]
设置值
[/box]

  1. $("#selectpicker1").selectpicker({  
  2.     'selectText':'苹果'  
  3. });  

[box style="tip"]
其他操作
[/box]

  1. var str='3,4,5,6';  
  2.    var arr=str.split(',');  
  3.    $('#usertype').selectpicker('val', arr);  
本文地址:https://www.lisen.me/the-bootstrap-select-a-multiple-choice-drop-down-box-plug-in.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情