selectPicker 多选下拉框插件

首先,因为它是个bootstrap的多选下拉框插件,所以html页面引入js和css:

<script src="../../common/bootstrap/js/bootstrap.min.js"></script>

<script src="../../js/bootstrap-select.js"></script>

<script src="../../js/bootstrap-select.min.js"></script>



<link rel="stylesheet" type="text/css" href="../../common/bootstrap/css/bootstrap.css" media="all">

<link rel="stylesheet" type="text/css" href="../../css/bootstrap-select.css" />

<link rel="stylesheet" type="text/css" href="../../css/bootstrap-select.min.css" />

 

 

html演示代码:

<select title="请选择"  id="supplierTag" name="usertype[]" class="selectpicker show-tick form-control" multiple data-max-options="1000"

      data-live-search="true">

      <!--JS动态注入-->



</select>

 

这里,select标签里面数据,也可以是写死的:

<option value="1" name="美容洗车">美容洗车</option>

<option value="2" name="维修保养">维修保养</option>

<option value="3" name="改装调优">改装调优</option>

<option value="4" name="4S店">4S店</option>

也可以像上面一样是动态拼接:

需要注意,拼接完毕之后,需要调用插件的刷新方法,否则数据不出现:

$("#supplierTag").selectpicker('refresh');

$('#supplierTag').selectpicker('render');

 

 

JS取值方式:

 

var tag = $("#supplierTag").val();

即可获取到值.如果我们选中了多个值,插件会获取多个,并且默认用逗号连接(注意传过去的是ID,并不是对应的具体值)

 

回显方式:

 

让我们从后台查询出来的数据,先用逗号分割出来得到一个数组,然后直接调用插件方法赋值.

var typeArr=typeId.split(','); //回显分类

$('#type').selectpicker('val', typeArr);

 

清空的时候,可以用如下方式清理:

$("#supplierTag").empty();

$("#supplierTag").selectpicker('refresh');

 

这里,因为这个插件提供了一个搜索的功能,如果搜索不到,默认会提示一句英文.我们可以用如下方法修改为中文:

$('.selectpicker').selectpicker({

    noneResultsText: '未找到符合条件的数据'

});

把这段代码放在页面加载事件中,即可.