联系官方销售客服

1835022288

028-61286886

分享经验 版主:论坛审计组
使用layui组件和自定义控制器去实现联动菜单
类型:迅睿CMS 更新时间:2024-12-19 13:58:32

使用layui组件和自定义控制器去实现联动菜单。方便二次开发,要更换select下拉框的样式可以看看,可以用在表单或者自定义控制器去使用。

image

image

php部分,用来去分类查找一级菜单对应的二级菜单内容
public function areaInfo(){
        $id = $_GET['id'];
        if ($id > 0) {
            $data = \Phpcmf\Service::M()->db->table('linkage_data_1')
                    ->select('id,name')
                    ->where('pid', $id)
                    ->get()->getResultArray();
            return json_encode($data);
        }else if ($id == 'undefined' || $id == ' '){
            $data = \Phpcmf\Service::M()->db->table('linkage_data_1')
                    ->select('id,name')
                    ->where('pid', 0)
                    ->get()->getResultArray();
            return json_encode($data);
        }
    }

html部分
<div class="layui-form-item">
                        <label class="layui-form-label">实际居住地</label>
                        <div class="layui-input-inline">
                            <select name="data[residence]"  lay-filter="province" id="province">
                                <option value="">请选择省份</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="data[residence]" lay-filter="city" id="city">
                                <option value="">请选择市</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="data[residence]" id="county">
                                <option value="">请选择县/区</option>
                            </select>
                        </div>
                    </div>


layui.use(['layer', 'form','jquery'], function () {
        var $= layui.jquery;
        var form = layui.form;
        //如果有加载页面就渲染第一个一级分类的话 就先调用一次方法
        renderSelecte($('#province')[0]);

        //监听一级分类下拉框变化
        form.on('select(province)',function(res){
            //变化就渲染第二个分类   把第一个下拉框的value传递
            renderSelecte($('#city')[0],res.value);
        });
        //监听二级分类下拉框变化
        form.on('select(city)',function(res){
            //变化就渲染第二个分类   把第一个下拉框的value传递
            renderSelecte($('#county')[0],res.value);
        });

        function renderSelecte(ele,id){
            //先判断id是否有值,这里是为了第一个下拉框改变值的时候 好把第二个下拉框的选项都删掉
            if(id){
                ele.length=0;
            }

            var areaData = '';
            $.ajax({
                url: "",//要进行查询的地址
                type: "GET",
                dataType: "json",
                async:false,
                success: function(data){
                    areaData = data;
                }});

            areaData.forEach((item,index)=>{
                var option =new Option(item.name,item.id);
                ele.append(option);
            });
            //渲染一下表单
            form.render();
        }
    });


回帖
  • 王小五
    #1楼    王小五
    2019-12-26 11:51:21
    Chrome 0

    uugai.com-1574519979106
  • 凌远明
    #2楼    凌远明
    2020-01-02 17:52:08
    Chrome 0
    非常帅!!!!!!!!!
  • yunshui2011
    #3楼    yunshui2011
    2020-01-02 18:45:18
    Chrome 0
    本部分内容设定了
  • 昱宇
    #4楼    昱宇
    2020-01-02 19:25:04
    Chrome 0
    看看
  • redweb
    #5楼    redweb
    2020-01-02 23:13:46
    华为手机 0
    学习学习!!
  • 猴子哥哥
    #6楼    猴子哥哥
    2020-01-02 23:49:01
    华为手机 0
    看看
  • wzwlqq
    #7楼    wzwlqq
    2020-01-03 07:17:11
    Chrome 0
    非常帅!!!!!!!!!
  • kouyuxin
    #8楼    kouyuxin
    2020-01-03 10:55:57
    Chrome 0
    这个不错的哦
  • 海水正蓝
    #9楼    海水正蓝
    2020-01-03 11:36:28
    Chrome 0
    ********此内容需要回复后才能看到********
    这种写法不安全,要过滤才行
  • 宽宽
    #10楼    宽宽
    2020-01-03 15:12:20
    小米手机 0
    看看
  • 九天网络(JiuDay)
    #11楼    九天网络(JiuDay)
    2020-01-03 21:26:20
    Chrome 0
    看看看看看看
  • soddiao
    #12楼    soddiao
    2020-01-06 17:44:27
    Chrome 0
    看看
  • 麦尖
    #13楼    麦尖
    2020-01-06 17:51:37
    Chrome 0
    不错 学习了
  • 过把瘾
    #14楼    过把瘾
    2020-01-11 16:48:42
    Chrome 0
    学习学习!!
  • 125762285
    #15楼    125762285
    2020-01-11 16:53:05
    Chrome 0
    吊炸天
  • 草木人
    #16楼    草木人
    2020-02-06 15:44:25
    Chrome 0
    学习学习
  • 清萌网络科技
    #17楼    清萌网络科技
    2020-02-20 14:41:40
    Firefox 73.0 0
    非常帅!!!!!!!!!
  • 张
    #18楼    张
    2020-02-20 15:28:47
    Chrome 0
    学习学习。
  • tayir2004
    #19楼    tayir2004
    2020-02-23 18:06:04
    QQ浏览器 0
    本部分内容设定了
  • tayir2004
    #20楼    tayir2004
    2020-02-23 18:08:53
    QQ浏览器 0
    能不能结合这个方法发布页面选择栏目
  • 琉惗
    #21楼    琉惗
    2020-02-23 18:19:34
    Chrome 0
    可以的tayir2004
  • 过把瘾
    #22楼    过把瘾
    2020-02-23 22:19:02
    Chrome 0
    琉惗 那就可以公开代码吗? 等等您的好消息
  • 琉惗
    #23楼    琉惗
    2020-02-23 22:23:01
    Chrome 0
    这么懒的吗?过把瘾
  • 琉惗
    #24楼    琉惗
    2020-02-23 22:27:27
    Chrome 0
    再说了,这个属于二开,我也不知道你们的具体需求我怎么给你们写然后公开啊过把瘾
  • 黄老邪
    #25楼    黄老邪
    2020-02-23 22:29:06
    Chrome 0
    学习下
  • imsuperman
    #26楼    imsuperman
    2020-03-26 13:18:06
    Chrome 0
    学习下
  • 五金冲压件
    #27楼    五金冲压件
    2020-03-26 15:55:23
    Chrome 0
    问问我群二无群俄武器俄武器俄武器
  • 无
    #28楼    无
    2020-03-28 10:43:53
    Chrome 0
    学习下
  • 1135334365
    #29楼    1135334365
    2020-04-01 13:38:31
    Chrome 0
    学习一下
  • 莫等闲
    #30楼    莫等闲
    2020-04-22 16:54:22
    Chrome 0
    学习
  • gangseo
    #31楼    gangseo
    2020-04-26 22:30:54
    Chrome 0
    学习一下
  • 15625789216
    #32楼    15625789216
    2020-05-18 14:40:28
    Chrome 0
    学习
  • 湘西北的风
    #33楼    湘西北的风
    2020-05-18 14:46:11
    Chrome 0
    学习一下
  • 胡银萍
    #34楼    胡银萍
    2020-05-18 17:38:15
    Chrome 0

    uugai.com-1574519979106
  • laosan
    #35楼    laosan
    2020-06-15 09:35:57
    Chrome 0
    学习学习
  • iseeyo
    #36楼    iseeyo
    2020-06-18 10:42:12
    Chrome 0
    你好,这和官方的联动菜单用途有什么区别吗
  • kevin1995
    #37楼    kevin1995
    2020-06-24 11:39:20
    Chrome 0
    学习学习
  • 小白一枚
    #38楼    小白一枚
    2020-06-28 19:50:45
    Chrome 0
    学习下,正需要实现这样的效果,看看大神怎么做的
  • 金春冬
    #39楼    金春冬
    2020-07-12 18:08:59
    Chrome 0
    学习下,正需要实现这样的效果
  • 宁静而致远
    #40楼    宁静而致远
    2020-07-29 11:52:24
    Chrome 0
    进来学习一下,想找这个方面的资料
  • 独舞
    #41楼    独舞
    2020-07-31 19:49:36
    Chrome 0
    求教
  • tao
    #42楼    tao
    2020-07-31 22:55:41
    Chrome 0
    学习学习!!
  • kaka123
    #43楼    kaka123
    2020-08-06 21:52:22
    Chrome 0
    学习学习!!
  • leo
    #44楼    leo
    2020-08-17 07:12:32
    Firefox 80.0 0
    学习学习!!
  • 帝云网络
    #45楼    帝云网络
    2020-09-01 12:39:40
    Chrome 0
    学习了,很实用!!!
  • 康帅傅
    #46楼    康帅傅
    2020-09-01 15:00:13
    Chrome 0
    看看。谢谢楼主
  • 流浪的乞丐
    #47楼    流浪的乞丐
    2020-09-26 20:08:47
    小米手机 0
    学习学习!!
  • 菜鸟1号
    #48楼    菜鸟1号
    2020-10-20 19:42:54
    Chrome 0
    学习学习学习学习
  • 晕菜菜
    #49楼    晕菜菜
    2020-10-24 09:31:14
    小米手机 0
    学习
  • 小昕
    #50楼    小昕
    2020-10-24 10:44:31
    Chrome 0
    学习学习!!
  • wangdz24
    #51楼    wangdz24
    2020-11-19 16:12:39
    Chrome 0
    非常帅!!!!!!!!!
  • Mr.Wa
    #52楼    Mr.Wa
    2021-01-18 14:07:58
    Chrome 0
    学习学习!!
  • 陶先生
    #53楼    陶先生
    2021-01-18 16:23:03
    Chrome 0
    学学!!!!!!
  • because
    #54楼    because
    2021-01-26 16:02:22
    Chrome 0
    学习学习
  • 1508568726
    #55楼    1508568726
    2021-01-26 16:43:57
    Chrome 0
    kankan
  • 张先生
    #56楼    张先生
    2021-02-14 10:11:46
    Chrome 0
    学习学习
  • 这个cms不错
    #57楼    这个cms不错
    2021-02-17 11:08:38
    Chrome 0
    学习,学习。。。。。。
  • 天河
    #58楼    天河
    2021-02-25 10:28:50
    Chrome 0
    学习学习
  • 吃不痴
    #59楼    吃不痴
    2021-03-11 22:21:30
    Chrome 0
    学习一下
  • LD
    #60楼    LD
    2021-03-15 09:39:51
    Chrome 0
    😎 666666666666666666666
  • 越王
    #61楼    越王
    2021-03-20 08:21:21
    Chrome 0
    不错
  • PHP学生
    #62楼    PHP学生
    2021-04-26 22:38:41
    Vivo手机 0
    学习学习
  • 没熟的土豆
    #63楼    没熟的土豆
    2021-10-25 16:33:19
    Chrome 0
    学习学习
  • 一片云
    #64楼    一片云
    2021-10-30 11:55:39
    Chrome 0
    谢谢分享!
  • 贰壹网络
    #65楼    贰壹网络
    2021-10-30 13:01:32
    Chrome 0
    ********此内容需要回复后才能看到********
    我来看看
  • 大兵
    #66楼    大兵
    2021-11-11 14:44:05
    Chrome 0
    来学习
  • 亦潇科技
    #67楼    亦潇科技
    2021-11-11 15:26:14
    Firefox 94.0 0

    uugai.com-1574519979106
  • 四分音符
    #68楼    四分音符
    2021-11-17 14:22:21
    Chrome 0
    学习学习学习学习
  • 芝麻通
    #69楼    芝麻通
    2022-04-15 07:54:08
    Chrome 0
    不错 学习了
  • 13856065852
    #70楼    13856065852
    2022-04-18 13:31:05
    Chrome 0
    学习学习
  • 老玩童
    #71楼    老玩童
    2022-04-21 11:12:50
    Chrome 0
    看看
  • 五行
    #72楼    五行
    2022-04-21 13:54:32
    Edge 0
    • 学习学习!!

  • Joker
    #73楼    Joker
    2022-04-21 13:55:14
    Chrome 0
    学习学习
  • zhutian
    #74楼    zhutian
    2022-05-26 16:42:42
    Chrome 0
    学习学习!!
  • 翡翠狐狸
    #75楼    翡翠狐狸
    2022-05-30 08:23:04
    Chrome 0
    王小五 哒哒哒哒哒哒多多多多多多多多多多多多多多多多多多多
  • sky
    #76楼    sky
    2022-06-02 07:01:54
    Chrome 0
    学习一下
  • 老李
    #77楼    老李
    2022-06-03 09:50:38
    小米手机 0
    学习,受教了,谢谢
  • 张还
    #78楼    张还
    2022-06-13 13:26:52
    Chrome 0
    😉
  • demonsprit
    #79楼    demonsprit
    2022-06-14 01:04:47
    Chrome 0
    学习
  • 屺无心
    #80楼    屺无心
    2022-06-14 18:37:08
    Chrome 0
    学习了,谢谢分享
  • cn1981
    #81楼    cn1981
    2022-06-15 16:15:59
    Chrome 0
    学习一下~
  • 好好学习天天向上
    #82楼    好好学习天天向上
    2022-06-16 14:45:52
    Chrome 0
    看看学习学习
  • 1239
    #83楼    1239
    2022-06-18 00:34:36
    Chrome 0
    • 学习学习

  • geekcode
    #84楼    geekcode
    2022-06-20 18:36:45
    Edge 0
    学习学习!!
  • 找寻知音
    #85楼    找寻知音
    2022-07-11 05:35:09
    华为手机 0
    谢谢 ,学习了📚🙇
  • 找寻知音
    #86楼    找寻知音
    2022-07-11 05:35:59
    华为手机 0
    回复了,还是看不到呢
  • imeelko
    #87楼    imeelko
    2022-07-11 22:30:23
    Chrome 0
    学习下,谢谢楼主
  • wintop
    #88楼    wintop
    2022-07-24 13:51:59
    Chrome 0
    mark 学习!
  • 快乐无罪
    #89楼    快乐无罪
    2022-07-27 15:34:10
    Chrome 0
    学习学习学习学习
  • XR_angel
    #90楼    XR_angel
    2022-08-25 15:46:01
    Firefox 104.0 0
    不错 学习了
  • huadizhixue
    #91楼    huadizhixue
    2022-09-12 14:29:42
    Chrome 0
    多谢分享,好帖子
  • IT-老男孩
    #92楼    IT-老男孩
    2022-09-24 07:14:27
    Firefox 104.0 0
    就是一个字,帅
  • siyuid
    #93楼    siyuid
    2022-09-27 01:16:04
    Chrome 0
    学习学习学习
  • 如果你唱歌
    #94楼    如果你唱歌
    2022-09-27 17:02:56
    Edge 0
    谢谢分享啊
  • rczpzx
    #95楼    rczpzx
    2022-09-27 22:49:39
    Edge 0
    学习学习,不知道能不能用
  • 搞定他
    #96楼    搞定他
    2022-09-28 13:01:53
    Edge 0
    好好学习非常有用
  • Sanys
    #97楼    Sanys
    2022-10-30 21:33:44
    Chrome 0
    😛 😎 😎 😎 😎 😎 学习学习下写法
  • 请将我遗忘
    #98楼    请将我遗忘
    2022-11-27 03:12:27
    Edge 0
    学习一下 ,谢谢
  • 良良
    #99楼    良良
    2022-11-30 17:25:14
    Chrome 0
    看看什么效果呢!
  • kuailong
    #100楼    kuailong
    2022-12-02 20:35:49
    Chrome 0
    不错不错,非常好看
  • 穹苍
    #101楼    穹苍
    2022-12-05 02:25:49
    Chrome 0
    非常帅!!!!!!!!!我想看看,学习下!谢谢!
  • 志伟
    #102楼    志伟
    2022-12-07 23:50:58
    Chrome 0
    进来学习一下,看看会不会用上
  • 踏雪哥
    #103楼    踏雪哥
    2022-12-13 13:00:53
    Firefox 107.0 0
    前端调用联动没有独立的组件吗?
  • langes
    #104楼    langes
    2022-12-14 01:00:23
    小米手机 0
    看看情况,🌝🌝谢谢
  • 来包花生
    #105楼    来包花生
    2022-12-16 16:49:22
    Firefox 107.0 0
    我也看看,学习学习!!
  • whqhl
    #106楼    whqhl
    2022-12-21 16:00:35
    Edge 0
    学习下学习下学习下学习下
  • 汇选课
    #107楼    汇选课
    2022-12-22 10:09:30
    Edge 0
    看看学习学习!!!!!!!!!!!!11
  • hakiss
    #108楼    hakiss
    2022-12-22 10:16:24
    Firefox 108.0 0
    看看看看扩
  • sky1100
    #109楼    sky1100
    2023-01-09 15:11:40
    Chrome 0
    学习学习学习学习
  • seasonsoft
    #110楼    seasonsoft
    2023-02-09 10:05:47
    Chrome 0
    漂亮!学习了
  • 半城烟沙
    #111楼    半城烟沙
    2023-04-09 23:49:48
    Chrome 0
    看看学习一下
  • 微云小编
    #112楼    微云小编
    2023-04-13 09:45:24
    Edge 0
    过来学习一下
  • Cocole
    #113楼    Cocole
    2023-04-20 11:20:34
    Chrome 0
    学习下11111321312
    ********此内容需要回复后才能看到********
  • 微云小编
    #114楼    微云小编
    2023-04-30 19:37:18
    Edge 0
    回复看看,学习一下
  • 小野兔
    #115楼    小野兔
    2023-06-15 00:39:04
    Edge 0
    进来学习学习学习学习 😀
  • jlmolpklo
    #116楼    jlmolpklo
    2023-06-20 14:48:58
    Chrome 0
    学习了,很实用!!!
  • 木偶人
    #117楼    木偶人
    2023-07-22 10:54:28
    Chrome 0
    收藏 学习下 感谢分享
  • 小萌娃
    #118楼    小萌娃
    2023-08-09 13:51:29
    Chrome 0
    学习学习学习学习
  • 映雪
    #119楼    映雪
    2023-09-11 12:31:55
    Chrome 0
    学习学习学习学习
  • 轱辘转不转
    #120楼    轱辘转不转
    2023-09-15 17:18:46
    Edge 0
    学习学习怎么实现!!
  • 匿名者
    #121楼    匿名者
    2023-09-29 11:11:34
    Edge 0
    QQ截图可以直接Ctrl+V到编辑器中
  • 芸芸众生
    #122楼    芸芸众生
    2023-10-09 22:31:35
    Chrome 0
    不错 学习了
  • criminalist
    #123楼    criminalist
    2023-10-10 18:36:09
    Chrome 0
    学习学习!!学习学习!!
  • Hi
    #124楼    Hi
    2023-10-10 22:08:26
    Chrome 0
    看看学习一下
  • 沐洋
    #125楼    沐洋
    2023-11-01 16:39:55
    Chrome 0
    学习学习学习学习
  • 唐
    #126楼    唐
    2023-11-01 17:05:07
    Chrome 0
    学习学习 学习学习!!
  • 爬树蜗牛
    #127楼    爬树蜗牛
    2023-11-02 09:26:15
    Firefox 119.0 0
    求教 求教求教求教求教
  • 俊杰
    #128楼    俊杰
    2023-11-02 09:31:59
    Chrome 0
    感谢楼主的分享
  • 兆午浪
    #129楼    兆午浪
    2023-12-12 05:01:06
    Chrome 0

    学习一下,感谢分享!

  • 兆午浪
    #130楼    兆午浪
    2023-12-14 03:50:43
    Chrome 0

    学习学习学习学习

  • 隽
    #131楼    隽
    2023-12-15 14:15:53
    Chrome 0
    学习学习学习学习学习学习
  • 钊华有课
    #132楼    钊华有课
    2023-12-15 16:09:24
    Chrome 0
    我来学习学习
  • 2503242464
    #133楼    2503242464
    2023-12-21 11:38:53
    Edge 0
    学习一下写法哈哈哈哈哈
  • 兆午浪
    #134楼    兆午浪
    2023-12-25 11:42:30
    Chrome 0
    海水正蓝
    • 学习学习

  • snuggle9235
    #135楼    snuggle9235
    2023-12-26 17:18:04
    Chrome 0
    厉害厉害~~学习一下
  • 江小白
    #136楼    江小白
    2024-01-17 21:55:58
    Edge 0
    学习学习学习。。。。。。
  • 创发
    #137楼    创发
    2024-01-18 16:35:17
    Chrome 0
    好东西,值得学习一下,
  • chengjp
    #138楼    chengjp
    2024-01-31 19:36:38
    Chrome 0
    联动菜单调用。
  • 木头块
    #139楼    木头块
    2024-02-04 18:01:16
    Edge 0
    感谢分享,学习一下
  • 小陆
    #140楼    小陆
    2024-02-05 16:03:01
    Chrome 0
    我来看看 个是怎么弄的
  • 爱学习的小白
    #141楼    爱学习的小白
    2024-02-14 16:07:02
    Chrome 0
    学习一下!感谢分享
  • 杨大棒
    #142楼    杨大棒
    2024-04-17 18:05:00
    Chrome 0
    • 进来学习一下,看看会不会用上
  • user_falle
    #143楼    user_falle
    2024-04-18 14:23:22
    Chrome 0
    学习一下!感谢分享
  • 大师在流浪
    #144楼    大师在流浪
    2024-04-20 18:39:50
    Chrome 0
    够用奥,老铁
  • 苦逼的民工
    #145楼    苦逼的民工
    2024-04-22 14:38:59
    Firefox 115.0 0
    学习学习!!学习学习!!
  • 迅睿粉丝
    #146楼    迅睿粉丝
    2024-05-10 11:52:28
    Chrome 0
    支持下楼主
  • indiboy
    #147楼    indiboy
    2024-06-21 14:07:34
    Chrome 0
    非常帅啊啊啊!!!!!!!!!
  • 1420594771
    #148楼    1420594771
    2024-07-08 16:05:11
    Chrome 0
    学习下,学习下,学习下,
  • fcvik
    #149楼    fcvik
    2024-08-01 14:31:54
    Chrome 0
    • 非常帅非常帅!!!!!!!!!

  • tsmupin
    #150楼    tsmupin
    2024-08-11 16:03:18
    Chrome 0
    学习一下学习
  • 赵小华
    #151楼    赵小华
    2024-08-20 16:08:28
    Chrome 0
    学习一下,谢谢分享。
  • 康露依
    #152楼    康露依
    2024-08-21 18:13:37
    Chrome 0
    看看,学习学习
  • xinhua
    #153楼    xinhua
    2024-08-29 17:30:52
    Firefox 129.0 0
    学一下,谢谢!
  • 版本城
    #154楼    版本城
    2024-08-31 01:21:57
    Chrome 0
    学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习
  • 简单哥
    #155楼    简单哥
    2024-09-12 08:17:16
    Edge 0
    • 学习学习

    • 学习学习

      • 学习学习

      • 学习学习


  • yichen
    #156楼    yichen
    2024-09-15 10:52:34
    Chrome 0
    看看能不能用到
  • yach
    #157楼    yach
    2024-09-24 11:24:22
    Chrome 0
    学习学习看看能不能用到
  • 我只会复制粘贴
    #158楼    我只会复制粘贴
    2024-10-02 00:08:46
    Chrome 0
    学习一下,不是挖坟
  • anui
    #159楼    anui
    2024-10-04 13:57:33
    Chrome 0
    学习学习学习学习
  • yunzhetian
    #160楼    yunzhetian
    2024-10-17 08:22:31
    Chrome 0
    本部分内容设定了隐藏,需要回复后才能看到
  • 李富贵儿
    #161楼    李富贵儿
    2024-10-17 09:47:29
    Chrome 0
    观摩学习一下
  • 李富贵儿
    #162楼    李富贵儿
    2024-10-17 09:47:50
    Chrome 0
    海水正蓝 让我瞅瞅
  • 不耻下问小菜新
    #163楼    不耻下问小菜新
    2024-10-21 18:50:35
    Chrome 0
    学习学习!!学习学习!!
  • 帅丁
    #164楼    帅丁
    2024-10-31 18:43:01
    Chrome 0
    帅啊 学习了
  • 首席执行官
    #165楼    首席执行官
    2024-12-03 15:32:23
    Chrome 0
    了解了解下
  • 烽火沧月
    #166楼    烽火沧月
    2024-12-18 13:51:55
    Edge 0
    学习学习在学习
  • 烽火沧月
    #167楼    烽火沧月
    2024-12-18 13:52:59
    Edge 0
    海水正蓝 如何过滤?看看
  • ylh190406
    #168楼    ylh190406
    2024-12-19 13:58:32
    Chrome 0
    学习一下,学习一下