参考来源https://www.cnblogs.com/nianyifenzhizuo/p/8119462.html
需要的css和js
<link rel="stylesheet" href="css/bootstrap-select.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
html中的代码：
title为默认显示的内容
<select class="selectpicker" multiple data-live-search="true" id="apply">'</select>
以下两句话必不可少
$("对象").selectpicker("refresh");
$(".selectpicker").selectpicker("refresh");
$(".selectpicker").selectpicker("render");
选中事件（每点击一个会自动将value的值放入数组中）
选中的value的值
$(".selectpicker").on('changed.bs.select',function(e){ //选中的value值，会自动添加到数组中
var induAll = $(this).val(); //数组
indusJson = JSON.stringify(induAll);//转换成json格式的字符串
console.log(indusJson)
console.log(typeof indusJson) });
默认选中赋值
$("对象").selectpicker('val',applySelect);
applySelect是数组[1,2,3]
案例
HTML部分代码
+'<div class="mui-input-row real-label">'
+'<label>行业</label>'
+'<select class="selectpicker" multiple data-live-search="true" id="industry">'
+'</select>'
+'</div>'
+'<div class="mui-input-row real-label">'
+'<label>应用</label>'
+'<select class="selectpicker" multiple data-live-search="true" id="apply">'
+'</select>'
+'</div>';
JS部分
//行业
var indusJson = '';
var induAll = '';
function changeIndu() {
$.ajax({
url: 'http://ezist.cn/api/industries',
type: 'get',
dataType: "json",
data: '',
success: function(data) {
console.log(data);
var datas = data.data;
var html = '';
$.each(datas,function(index,item) {
html += '<option value="'+item.id+'">'+item.name+'</option>';
});
$('#industry').html(html);
$("#industry").selectpicker("refresh");
$("#industry").selectpicker("render");
$('#industry').on('changed.bs.select',function(e){
//选中的value值，会自动添加到数组中
induAll = $(this).val();
//转换成json格式的字符串
indusJson = JSON.stringify(induAll);
//当修改资料不在点击的时候数组里面就没有值了,将值存到缓存中
window.localStorage.setItem('Indu',indusJson);
});
//设置默认的选中项，InduSelect是数组[0,1,2]
$("#industry").selectpicker('val',InduSelect);
},
error: function () {
console.log("数据请求失败");
}
})
} //应用
var appliesJson = '';
function changeApp() {
$.ajax({
url: 'http://ezist.cn/api/applies',
type: 'get',
dataType: "json",
data: '',
success: function(data) {
var datas = data.data
var html = '';
// html = '<option value="'+ paramAppIndex +'">'+ paramAppVal +'</option>'
$.each(datas, function(index,item) {
html += '<option value="'+item.id+'">'+item.name+'</option>';
});
$('#apply').append(html);
$("#apply").selectpicker("refresh");
$("#apply").selectpicker("render");
$('#apply').on('changed.bs.select',function(e){
//选中的value值，会自动添加到数组中
var appliesAll = $(this).val();
//转换成json格式的字符串
appliesJson = JSON.stringify(appliesAll);
//当修改资料不在点击的时候数组里面就没有值了,将值存到缓存中
window.localStorage.setItem('Appl',appliesJson);
});
$("#apply").selectpicker('val',applySelect);
},
error: function () {
console.log("数据请求失败");
}
})
}