联系官方销售客服

1835022288

028-61286886

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

使用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
    学习一下!感谢分享