第一种,普通的下拉搜索联动
<div class="mdui-col-xs-12 mdui-col-sm-4 mdui-col-md-3 mdui-col-lg-2" data-field="business_company">
<div class="search-form-item">
<label class="search-form-label">业务公司</label>
<div id="business_company" class="search-form-input">
<select name="business_company" lay-filter="business_company" class="layui-input">
<option value="" {if $Think.get.business_company ==""} selected {/if}>全部</option>
{if !empty($business_company)}
{foreach $business_company as $k=>$v}
<option value="{$k}" {if $Think.get.business_company == $k} selected {/if}>{$v}</option>
{/foreach}
{/if}
</select>
</div>
</div>
</div>
//业务公司联动业务员
form.on('select',(data)=>{
if ($(data.othis).parent().prop("id") == 'business_company') {
//console.log();
let html_one='<option value="">全部</option>';
let html_two='<option value="">全部</option>';
$.post('{:url("$classuri/business_company_chang")}',{dept_id:data.value},(res)=>{
for (const key in res) {
// console.log(key);
if ($.inArray(res[key].is_disabled, is_dis_all)){
html_one += '<option value="'+ res[key].emp_id +'">'+ res[key].emp_name + '</option>'
}else{
html_two += '<option value="'+ res[key].emp_id +'">'+ res[key].emp_name + '</option>'
}
}
//console.log(res);
// console.log(html);
$('[name="emp_id_one"]').html(html_one);
$('[name="emp_id_two"]').html(html_two);
form.render();
})
}
})
第二种,多选的下拉搜索联动
<div class="mdui-col-xs-12 mdui-col-sm-6 mdui-col-md-4 mdui-col-lg-2">
<div class="search-form-item">
<label class="search-form-label">业务公司</label>
<div class="search-form-input">
<select name="company_id" lay-filter="company_id" xm-select-skin="default" xm-select="company_id" xm-select-height="36px" xm-select-search>
{if !empty($getCompanyArr)}
{foreach $getCompanyArr as $k=>$v}
<option value="{$v.company_id}" {if $Think.get.company_id == $v.company_id} selected {/if}>{$v.company_name_cn}</option>
{/foreach}
{/if}
</select>
</div>
</div>
</div>
var api_url='{:url("$classuri/getBusinessGroupByCompany")}'
//业务公司联动业务组
layui.formSelects.on('company_id', function(id, vals, val, isAdd, isDisabled){
console.log('33333333',id, vals, val, isAdd, isDisabled);
if(isAdd) { // 增加
vals.push(val)
str_dept = ''
vals.forEach(item => { str_dept = str_dept + ',' + item.value})
str_dept = str_dept.replace(',', '')
console.log(str_dept,str_dept.split(','),'str_dept.split(',')str_dept.split(',')增加');
let html_one='';
formSelects.data('dept_id', 'server', {
url:api_url,
type: 'POST',
data:{
CompanyId: str_dept
},
});
} else { // 减少
if(vals.length == 1) { // 减少后就没有了 1个减了没有了
console.log(77777);
formSelects.data('dept_id', 'server', {
url:api_url,
type: 'POST',
data:{
CompanyId: ''
},
});
formSelects.data('emp_id_one', 'server', {
url:api_url_emp,
type: 'POST',
data:{
GroupId: ''
},
});
formSelects.data('emp_id_two', 'server', {
url:api_url_unemp,
type: 'POST',
data:{
GroupId: ''
},
});
} else { // 1个减了还有
str_dept = ''
let new_arr = vals.filter(item => {
return item.value != val.value
})
new_arr.forEach(item => { str_dept = str_dept + ',' + item.value})
str_dept = str_dept.replace(',', '')
console.log(str_dept,str_dept.split(','),'str_dept.split(',')str_dept.split(',')减少');
let html_one='';
formSelects.data('dept_id', 'server', {
url:api_url,
type: 'POST',
data:{
CompanyId: str_dept
},
});
}
}
});
再搜索的时候实现下拉回显
var dept_id='{$Think.get.dept_id|default=""}';
var arr = dept_id.split(',');
ormSelects.data('dept_id', 'server', {
url: api_url,
type: 'POST',
data: {
CompanyId: company_id,
},
success: function(data) {
if (!selectedDept) {
formSelects.value('dept_id', arr); // Set selected values
selectedDept = true; // Set the flag to avoid repetitive rendering
}
},
});