select 联动菜单思路

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

    //联动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 (){

    })

---

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