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

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

学习笔记

下拉框联动

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

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

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

php 复制代码
    <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进行传递

javascript 复制代码
      // 机台状态下拉框选中值时
  $(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;
       });
  });

这是后端数据。

php 复制代码
    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);
    }

以上是下拉框联动。

如转载请标明出处谢谢。

相关推荐
mysla21 分钟前
嵌入式学习day44-硬件—ARM体系架构
学习
微露清风29 分钟前
系统性学习数据结构-第三讲-栈和队列
java·数据结构·学习
ytttr8731 小时前
PHP中各种超全局变量使用的过程
开发语言·php
77qqqiqi2 小时前
学习字符串
学习
滴滴滴嘟嘟嘟.3 小时前
Qt动画功能学习
开发语言·qt·学习
淮北4943 小时前
计算机网络学习(七、网络安全)
学习·计算机网络·web安全
萘柰奈3 小时前
Unity学习----【进阶】Input System学习(一)--导入与基础的设备调用API
学习
天天开心a3 小时前
OSPF基础部分知识点
网络·笔记·学习·智能路由器·hcip
淮北4943 小时前
计算机网络学习(六、应用层)
linux·学习·计算机网络
落羽的落羽5 小时前
【C++】简单介绍lambda表达式
c++·学习