下拉框多选插件bootstrap-select
目录
1.效果：
2.前端代码
//这是一个基于bootstrap的插件
<link href="<%=context%>/css/bootstrap-select.css" rel="stylesheet">
<script src="<%=context%>/js/bootstrap-select.js"></script>
<select id="province" name="provinceCode" title="选择省" class="selectpicker show-tick form-control" multiple >
</select>
说明：
1、show-tick 选中的数据后边的对勾
2、multiple 多选
3、form-control bootstrap的样式
4、data-live-search="true" 下拉选项有个搜索框，根据需要决定是否设置
5、data-actions-box="true" 是否全选，全不选，根据需要
<select id="city" name="cityCode" title="选择市" class="selectpicker show-tick form-control" multiple>
</select>
<select id="area" name="areaCode" title="选择区县" class="selectpicker show-tick form-control" multiple>
</select>
3.js代码
//下拉多选初始化
$(window).on('load', function () {
$('.selectpicker').selectpicker();
});
//多选三级联动start
$(function() {
//获得三个下拉菜单元素
var $pro = $("#province");
var $city = $("#city");
var $area = $("#area");
$.get(
"<%=context%>/area/area?parentCode=" + "000000",//获取所有省数据
function(data) {
$(data).each(function(){
$pro.append("<option value='"+this.code+"'>"+this.name+"</option>");
});
},"json");
//省级菜单选择事件
$pro.change(function(){
//清空市县菜单中数据,保留第一个属性
$city.prop("length",0);
$area.prop("length",0);
var arrProCode = $pro.val();//所有选中的省code
//遍历省code，以省code查相应市数据，动态添加到下拉框。
for ( var i = 0; i <arrProCode.length; i++){
$.get(
"<%=context%>/area/area?parentCode=" + arrProCode[i],
function(data) {
$(data).each(function(){
$city.append("<option value='"+this.code+"'>"+this.name+"</option>");
});
//这句必须有，要不然没数据
$city.selectpicker("refresh");
},"json");
}
});
});
//多选三级联动end
4.补充：
1.下拉分组
<select id="test">
<optgroup label="name">
<option value="1">张三</option>
<option value="2">李四</option>
</optgroup>
</select>
$('#payment').find("option:selected").attr("selected", false);
3.获得select被选中option的value和text和其他属性值
1:var options=$("#select option:selected"); //获取选中的项
2:alert(options.val()); //拿到选中项的值
3:alert(options.text()); //拿到选中项的文本
4:alert(options.attr('url')); //拿到选中项的url值
5.组件下载
链接：https://pan.baidu.com/s/1NyRTEy4doo4K2h6h5QK0lw
提取码：rbr8
官方下载地址：https://developer.snapappointments.com/bootstrap-select/
官方示例地址：https://developer.snapappointments.com/bootstrap-select/examples/
参数详解地址：https://developer.snapappointments.com/bootstrap-select/options/
事件方法地址：https://developer.snapappointments.com/bootstrap-select/methods/
6.更多参考
1.
bootstrap-select 的多选+模糊查询下拉框详解（官方示例文档解读）
2.
3.