15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 后端开发 Thinkphp5

select下拉选择框架,二级联动选择

教腾豪| 发布于 2021-09-01 20:50:53| 109阅读| 0点赞| 0评论
举报

二级联动,添加分类,进行二级联动选择分类




多级联动进行下拉选择框,首先要添加分类,

分类分为顶级分类和子分类


添加顶级分类和二级分类

public function add()
    {
        if ($this->request->isPost()) {
            $data = $this->request->post();
            if (empty($data['title'])) return json(['status' => 'error', 'msg' => '标题不能为空']);
            $data['is_show'] = 'true';
            $data['create_time'] = time();
            $res = columnsortmodel::insert($data);
            if ($res) return json(['status' => 'success', 'msg' => '添加成功', 'url' => '/admin/column.columnsort/index']);
        } else {
            $id = $this->request->get('id');
            $this->assign('pid', $id);
            $video = Db::name('videosort')->where(['is_show'=>'true','pid'=>2])->order('id','asc')->select();
            $this->assign([
                'video'=>$video,
            ]);
            return $this->fetch();
        }
    }
    public function adder(){
        if ($this->request->isPost()) {
            $data = $this->request->post();
            if (empty($data['title'])) return json(['status' => 'error', 'msg' => '标题不能为空']);
            $data['is_show'] = 'true';
            $data['create_time'] = time();
            $res = columnsortmodel::insert($data);
            if ($res) return json(['status' => 'success', 'msg' => '添加成功', 'url' => '/admin/column.columnsort/index']);
        } else {
            $id = $this->request->get('id');
            $this->assign('pid', $id);

            return $this->fetch();
        }
            return view();
    }

这是添加二级分类的

下面是二级联动选择查表

$sort = Db::name('columnsort')->where(['pid' => 0])->select();
            foreach ($sort as $k=>$v) {
                $sort[$k]['sort']=Db::name('videosort')->where(['is_show'=>'true','pid'=>2,'id'=>$v['sort']])->value('title');
            }
            $this->assign('sort', $sort);
            return $this->fetch();

HTML代码

<div class="layui-form-item">
                            <label class="layui-form-label">文档分类</label>
                            <div class="layui-input-inline" style="z-index: 1000;">
                                <select lay-filter="test">
                                    <!--                                    <optgroup label="一级分类"></optgroup>-->
                                    <option value="">请选择</option>
                                    {volist name='sort' id='s' key='k'}
                                    <option value="{$s.id}">({$s.sort})--{$s.title}</option>
                                    {/volist}
                                </select>
                            </div>
                            <div class="layui-input-inline" style="z-index: 1000;">
                                <select name="er_id">
                                </select>
                            </div>
                        </div>


先选择顶级分类,去请求二级分类的接口方法

form.on('select(test)', function(data){
            var id=data.value;
            $.ajax({
                url:'geterji',
                data:{id:id},
                type:'post',
                success:function (res) {
                    $('select[name="er_id"]').empty();
                    var html='';
                    for(var i=0;i<res.length;i++){
                        html+='<option value="'+res[i]["id"]+'">'+res[i]["title"]+'</option>'
                    }
                    $('select[name="er_id"]').<a href="https://www.qinfenniao.com/nav/%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91.html" target="_blank">app</a>end(html);
                    form.render('select'); //刷新select选择框渲染
                    console.log(html);
                }
            })
        });


通过请求返回的数据,追加到页面上

public function geterji()
    {
        $id = $this->request->param('id');
        $data = Db::name('columnsort')->where(['pid' => $id])->field('id,title')->select();
        return <a href="https://www.qinfenniao.com/article.html?name=js" target="_blank">js</a>on($data);
    }

这样就可以实现二级联动筛选

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

教腾豪
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部