欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

记录bootstrap-select下拉多选框

程序员文章站 2022-03-09 13:54:07
...

引入css文件

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.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>

记录bootstrap-select下拉多选框

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

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

记录bootstrap-select下拉多选框

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

记录bootstrap-select下拉多选框

 

js初始化,设置选定的值

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

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

更新UI

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

选中事件

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

});