记录bootstrap-select下拉多选框

最新推荐文章于 2024-08-08 07:40:01 发布

振峰的博客

最新推荐文章于 2024-08-08 07:40:01 发布

阅读量175

点赞数

本文链接：https://blog.csdn.net/weixin_41974205/article/details/103913741

版权

引入css文件

引入js文件
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.0/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
</head>
<body>

添加“multiple ” 设置为多选，并且设置最多能选择2项 data-max-options="2"

<select class="selectpicker"data-max-options="2" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option> 
</select>

添加检索：data-live-search="true"

设置检索placeholder属性：data-live-search-placeholder="搜索"

添加“全选/反选” 功能按钮 data-actions-box="true"

js初始化,设置选定的值

$('.selectpicker').selectpicker('val','mustard');

$('.selectpicker').selectpicker('val',['mustard','relish']);

更新UI

$('.selectpicker').selectpicker('refresh');

选中事件

$('.selectpicker').on('changed.bs.select',function(e){

});

振峰的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫