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

以上是下拉框联动。

如转载请标明出处谢谢。

相关推荐
致***锌1 分钟前
期权交易完整版教程简介
笔记
棱镜研途13 分钟前
学习笔记丨卷积神经网络(CNN):原理剖析与多领域Github应用
图像处理·笔记·学习·计算机视觉·cnn·卷积神经网络·信号处理
皮蛋sol周1 小时前
嵌入式学习C语言(八)二维数组及排序算法
c语言·学习·算法·排序算法
人生游戏牛马NPC1号1 小时前
学习 Flutter (一)
android·学习·flutter
Aczone282 小时前
嵌入式 数据结构学习 (六) 树、哈希表与内核链表
数据结构·学习·算法
想成为大佬的每一天2 小时前
Linux驱动学习day22(interrupt子系统)
学习
Chef_Chen3 小时前
从0开始学习R语言--Day43--Wald检验
学习
真的想上岸啊3 小时前
学习C++、QT---21(QT中QFile库的QFile读取文件、写入文件的讲解)
c++·qt·学习
之歆3 小时前
Python-正则表达式-信息提取-滑动窗口-数据分发-文件加载及分析器-浏览器分析-学习笔记
python·学习·正则表达式
rui锐rui3 小时前
大数据学习7:Azkaban调度器
学习