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);
    }

以上是下拉框联动。

如转载请标明出处谢谢。