搜索
javascript - select 联动菜单思路
PHPz
PHPz 2017-04-10 12:46:11
[JavaScript讨论组]

一直想不出来,自己模拟了一个二级的,但是不够好,求思路哦,求指点,无限级的怎么做?

    //联动select
 var textEndTime = $("#text-end-time"),
        tmplp = "",
        textEndMonth = $("#text-end-month"),
    json = [
            {
                "北京": [
                    "东城区",
                    "西城区",
                    "朝阳区",
                    "昌平区",
                    "海淀区"
                ]
            },
            {
                "上海": [
                    "普东区",
                    "杨惠区",
                    "马栏区"
                ]
            },
            {
                "天津": [
                    "基本原则",
                    "基本原则",
                    "基本原则"
                ]
            },
            {
                "重庆": ["重庆"]
            }
        ];
        //textEndTime.append("<option>"+obj[i]+"</option>")
       $.each(json,function(idx,obj){
            for (var i in obj) {
                tmplp +="<option>"+i+"</option>";
            }

       })
    textEndTime.append(tmplp);
    textEndTime.change(function () {
        var self = $(this),
            index = this.selectedIndex,
            tmpl = "",
            selfVal = self.val();
            if(index != 0) {
              var valueData = json[index-1];
                $.each(valueData,function(idx,obj){
                    for(var i in obj){
                        //if(i == 0) {
                            //var createSelect = $("<select>");
                            //console.log(createSelect);
                        //}
                         tmpl +="<option>"+obj[i]+"</option>";
                        }
                })
                textEndMonth.empty();
                textEndMonth.append(tmpl);
            } else {
                textEndMonth.empty().append('<option value="">请选择</option>');
            }
    })
    $("#text-end-month").change(function (){

    })
PHPz
PHPz

学习是最好的投资!

全部回复(1)
黄舟

无限级的肯定是要读数据库的,每个菜单都保存着他的上级菜单的id

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号