下拉框选择联动
效果如下所示:


左侧选择一个选项时,右侧下拉框只出现相应可选择项
代码如下:
<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: '请选择人员...' //默认显示内容
});
}
}
})
}
本文介绍了一种实现下拉框联动选择的方法,当左侧下拉框选项改变时,右侧下拉框将根据所选部门动态更新可选项。通过使用jQuery和Ajax技术,实现了从服务器获取用户列表并实时更新多选下拉框的功能。
2953





