1、引用css/js
<link href="../../plugins/css/bootstrap.min.css" rel="stylesheet">
<link href="../../plugins/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="../../plugins/bootstrap-3.3.7-dist/js/plugins/bootstrap-select/dist/css/bootstrap-select.css" rel="stylesheet">
<script src="../../plugins/js/jquery.min.js"></script>
<script src="../../plugins/js/bootstrap.min.js"></script>
<script src="../../plugins/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../plugins/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="../../plugins/bootstrap-3.3.7-dist/js/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
2、html
<div class="form-group">
<label class="col-sm-3 control-label">编码</label>
<div class="col-sm-7">
<select class="form-control selectpicker" id="addCom">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">用户</label>
<div class="col-sm-7">
<select multiple id="addUsercode" class="selectpicker form-control">
</select>
</div>
</div>
3、js 通过ajax获取编码,通过选择编码加载用户,用户可以多选
$.ajax({
method:"post",
url: '/list',
dataType : "jsonp",
async:true,
success:function (result) {
var str='<option value="">--请选择--</option>';
for (var i = 0; i < result.length; i++) {
str+='<option value='+result[i].code+'>'+result[i].codename+'</option>';
}
$("#addCom").html(str);
}
});
$("#addComcode").change(function(){
var code = $("#addCom").val();
$.ajax({
method:"post",
url: '/userList',
data:{
code: code
},
success:function (res) {
var str="";
for (var i = 0; i < res.length; i++) {
str+='<option value="'+res[i].usercode+'">'+res[i].username+'</option>';
}
$("#addUser").html(str);
$('#addUser').selectpicker('refresh');
}
});
});
第一个select通过ajax获取数据,第二个select通过第一select的change事件加载数据
注意:$('#addUser').selectpicker('refresh');这一句必须加,不然第二个数据显示不出来