fastadmin 下拉选择框联动的两种方法

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

方法二不需可写在事件监听中, 每次触发下拉时, 它都会执行

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A黄俊辉A

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值