fastadmin 下拉选择框是用的 selectpage 组件
下面通过实例来说明
html 页面如下
// 类型
<div class="form-group" >
<label class="control-label col-xs-12 col-sm-2">{:__('类型')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-lztype_id" data-rule="required" data-source="lztype/lztypelist" class="form-control selectpage" name="row[lztype_id]" type="text" value="">
</div>
</div>
// 类型对应的联动菜单的内容
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('履职内容')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-lztypecontent_id" data-source="lztype/content" class="form-control selectpage" name="row[lztypecontent_id]" type="text" value="">
</div>
</div>
需求是, 当类型发生改变时, 下面的 履职内容 也要发生相应的改变
后台接口如下
public function lztypelist(){
$count = $this->model->where("pid",0)->count();
$list = $this->model->where("pid",0)->select();
$result = array("total" => $count, "list" => $list);
return json($result);
}
public function content(){
$parentId = input("custom.id");
$count = $this->model->where("pid", $parentId)->count();
$list = $this->model->where("pid", $parentId)->select();
$result = array("total" => $count, "list" => $list);
return json($result);
}
方法一,监听 类型数据的改变,同时修改 履职内容 的数据,如下面的代码
$(document).on("change","#c-lztype_id",function(){
var id = $(this).val();
$.ajax({
url:"/admin/lztype/content",
type:"post",
data:{
custom:{id:$(this).val()},
keyField:"id",
showField:"name"
},
success:function(res){
$("#c-lztypecontent_id").selectPageData(res.list);
}
})
});
方法二 使用 fastadmin data-params 参数
$("#c-lztypecontent_id").data("params", function(){
return {custom: {id: $("#c-lztype_id").val()}};
});
方法二不需可写在事件监听中, 每次触发下拉时, 它都会执行