下拉框选择联动
效果如下所示:
左侧选择一个选项时,右侧下拉框只出现相应可选择项
代码如下:
<select class="form-control" id="acceptdepart" name="acceptdepart"></select>//左侧单选下拉框
<select class="form-control" id="acceptuser" name="acceptuser[]" data-live-search="true"></select>//右侧多选下拉框
//筛选用户信息
$('#acceptdepart').on('change', function () {
var _val = $(this).val();
if (_val && _val != '') {
$("#acceptuser").val("").trigger("change");//清空
getPersonList(_val);
}
})
// 获取接收人
function getPersonList(departid){
$('select[name="acceptuser[]"]').html("");//清空重置
$.ajax({
url: Tools.getUrlActon('Mainten', 'Userinfoext', 'getListByDepartForCombobox',{'departeid':departid}),
dataType: 'json',
async: false,
success: function (data) {
if($('select[name="acceptuser[]"]').data('selectpicker')){
$('#acceptuser').selectpicker('destroy').removeAttr("multiple");
}//清空多选(多选为selectpicker插件)
if(data.length>0){
data.forEach(function(element){
$('select[name="acceptuser[]"]').append('<option value="'+element.id + '" >' + element.personname + '</option>');
});
$('select[name="acceptuser[]"]').attr("multiple",true).val('').selectpicker({
noneSelectedText: '请选择人员...' //默认显示内容
});
}
}
})
}