联系我们
028-61286886
投诉邮箱

q@xunruicms.com

使用组件和自定义控制器去实现联动菜单方便二次开发要更换下拉框
方案栏目:迅睿CMS 发布时间:2019-12-26 11:34:28

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


解决方案列表
  • 2019-12-26 11:51:21


    uugai.com-1574519979106

  • 2020-01-02 17:52:08

    非常帅!!!!!!!!!

  • 2020-01-02 18:45:18

    本部分内容设定了

  • 2020-01-02 19:25:04

    看看

  • 2020-01-02 23:13:46

    学习学习!!

  • 2020-01-02 23:49:01

    看看

  • 2020-01-03 07:17:11

    非常帅!!!!!!!!!

  • 2020-01-03 10:55:57

    这个不错的哦

  • 2020-01-03 11:36:28
      $id = $_GET['id'];

    这种写法不安全,要过滤才行

  • 2020-01-03 15:12:20

    看看

  • 2020-01-03 21:26:20

    看看看看看看

  • 2020-01-06 17:44:27

    看看

  • 2020-01-06 17:51:37

    不错 学习了

  • 2020-01-11 16:48:42

    学习学习!!

  • 2020-01-11 16:53:05

    吊炸天

  • 2020-02-06 15:44:25

    学习学习

  • 2020-02-20 14:41:40

    非常帅!!!!!!!!!

  • 2020-02-20 15:28:47

    学习学习。 

  • 2020-02-23 18:06:04

    本部分内容设定了

  • 2020-02-23 18:08:53

    能不能结合这个方法发布页面选择栏目

  • 2020-02-23 18:19:34

    可以的

    回复@tayir2004

  • 2020-02-23 22:19:02

    回复@琉惗   那就可以公开代码吗?   等等您的好消息

  • 2020-02-23 22:23:01

    这么懒的吗?

    回复@过把瘾

  • 2020-02-23 22:27:27

    再说了,这个属于二开,我也不知道你们的具体需求我怎么给你们写然后公开啊

    回复@过把瘾

  • 2020-02-23 22:29:06

    学习下

  • 2020-03-26 13:18:06

    学习下

  • 2020-03-26 15:55:23

    问问我群二无群俄武器俄武器俄武器

  • 无
    2020-03-28 10:43:53

    学习下

  • 2020-04-01 13:38:31

    学习一下