版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cplvfx/article/details/83932076
TIP：作者这里以二级联动为例
HTML代码
tip:代码是PHP动态渲染的
<div class="layui-form-item">
<label for="trade" class="layui-form-label">
<span class="x-red">*</span>选择部门
</label>
<div class="layui-input-inline">
<select name="admin_class_id" id="admin_class_id" lay-verify="required" lay-filter="admin_class_id">
<option value="0" >请选择服务部门</option>
{volist name='ac_list' id='vo'}
{eq name="$vo.id" value="$ac_id"}
<option value="{$vo.id}" selected>{$vo.class_name}</option>
{else/}
<option value="{$vo.id}">{$vo.class_name}</option>
{/eq}
{/volist}
</select>
</div>
</div>
<div class="layui-form-item">
<label for="trade" class="layui-form-label">
<span class="x-red">*</span>选择人员
</label>
<div class="layui-input-inline">
<select name="admin_user_id" id="admin_user_id" lay-verify="required" >
<option value="0" >请选择服务人员</option>
{volist name='au_list' id='vo'}
<option value="{$vo.id}">{$vo.name}</option>
{/volist}
</select>
</div>
</div>JS代码：
//监听select选择
form.on('select(admin_class_id)', function(data){
//发异步
$.get("/index/service_staff/read/ac_id/"+data.value,function(data,status){
console.log("数据: " + data.length + "\n状态: " + status);
console.log(data);
//清空下拉框
$("#admin_user_id").empty();
$("#admin_user_id").prepend("<option value='0'>--请选择服务人员--</option>");
for(var i = 0; i < data.length; i++)
{
$("#admin_user_id").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
}
console.log("刷新select选择框渲染");
form.render('select'); //刷新select选择框渲染
});
console.log("get调用完毕");
}); PHP 异步请求代码
/**
*选择部门后，发起异步get请求
*
* @param int $id
* @return \think\Response
*/
public function read($ac_id)
{
//获取admin_user表数据
$au_list=AdminUserModel::all(function($query)use($ac_id){
$query->where('admin_class_id','=',$ac_id)
->order('id','DESC')
->field('id,name');
});
return json($au_list);
}延伸阅读:
https://blog.csdn.net/cplvfx/article/details/83928150