fastadmin学习笔记-----下拉框联动

fastadmin学习笔记----- fastadmin下拉框联动

学习笔记

下拉框联动

在项目中经常需要用到下拉框联动。网上的资料多有不全，所以根据自身经验，以笔记的形式发布出来。仅供参考。

上边的“ 状态 ” 下拉框用的动态下拉框，就是，statelist 为后端传过来的数据，绑定到下拉框。

下边的子状态下拉框，是根据状态下拉框的改变，而进行改变。

    <div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('状态')}:</label><div class="col-xs-12 col-sm-8"><select  id="c-stateId" data-rule="required" class="form-control selectpicker" name="row[stateId]"><option value="0"  >请选择状态</option>{foreach name="StateList" item="vo"}<option value="{$vo.id}"  >{$vo.title}</option>{/foreach}</select></div></div><div class="form-group"><label for="c-machine_list_state" class="control-label col-xs-12 col-sm-2">{:__('子状态')}:</label><div class="col-xs-12 col-sm-8"><select  id="c-fi_Sub" data-rule="required" class="form-control" name="row[title]"><option value="0" >请选择状态</option></select></div></div>

通过 js 阿贾克斯ajax进行传递

// 机台状态下拉框选中值时$(document).on("change", "#c-stateId", function () {var thisval=$(this).val();Fast.api.ajax({ url: 'state/State',data: {thisval: thisval},}, function (data, ret) {console.log(data);$("#c-fi_Sub").html(data.html);return false;}, function (data, ret) {//如果失败的回调alert(ret.msg);return false;});});

这是后端数据。

    public function State(){$mciSerId = $this->request->post("thisval");if($mciSerId==""){$backData = [];exit;}$rsList=Db::name("state_list")->field("id,pid,title")->where(" pid=$mciSerId ")->order("id ASC")->select();$html='<option value="0">请选择状态</option>';if(isset($rsList)){foreach ($rsList as $k=>$v){$html.=' <option value="'.$v["id"].'" >'.$v["title"].'</option>';}}$data=[];$data["html"]=$html;$backData=[];$backData["msg"]="成功";$backData["code"]=1;$backData["data"]=$data;return json($backData);}