这样的数组用javascript怎么做二级菜单？

Question

下面的数组，用javascript怎么写二级菜单？

province_class = function () {
    var p = {
        [["110000", "北京"], ["310000", "上海"]]
}
};

city_class = function () {
    var c = [["110101", "东城", "110000"], ["110102", "西城", "110000"], ["110105", "朝阳", "110000"], ["110106", "丰台", "110000"], ["110107", "石景山", "110000"], ["110108", "海淀", "110000"], ["110109", "门头沟", "110000"], ["110111", "房山", "110000"], ["110112", "通州", "110000"], ["110113", "顺义", "110000"], ["110114", "昌平", "110000"], ["110115", "大兴", "110000"], ["110116", "怀柔", "110000"], ["110117", "平谷", "110000"], ["110228", "密云", "110000"], ["110229", "延庆", "110000"],
        ["310101", "黄浦", "310000"], ["310104", "徐汇", "310000"], ["310105", "长宁", "310000"], ["310106", "静安", "310000"], ["310107", "普陀", "310000"], ["310108", "闸北", "310000"], ["310109", "虹口", "310000"], ["310110", "杨浦", "310000"], ["310112", "闵行", "310000"], ["310113", "宝山", "310000"], ["310114", "嘉定", "310000"], ["310115", "浦东", "310000"], ["310116", "金山", "310000"], ["310117", "松江", "310000"], ["310118", "青浦", "310000"], ["310120", "奉贤", "310000"], ["310230", "崇明", "310000"]
    ]
};

Answer 1

你这个显然是不行的，数据结构都没有搞清楚，除非前面的都归属于北京后面全部属于上海，然后建立个索引表。但是不会有人这样搞的，明明可以用二维数组或者用其他数据结构的，干嘛把逻辑搞复杂呢？

好了，写个demo给你看一下，我这个是用了面向对象的思想，省份和城市是一一对应的，逻辑上很好理解

function Area(province,city) {
    this.province = province;
    this.city = city;
};

var beijing = new Area(["110000","北京"],
    [
        ["110101", "东城", "110000"],
        ["110102", "西城", "110000"],
        ["110105", "朝阳", "110000"],
        ["110106", "丰台", "110000"],
        ["110107", "石景山", "110000"],
        ["110108", "海淀", "110000"],
        ["110109", "门头沟", "110000"],
        ["110111", "房山", "110000"],
        ["110112", "通州", "110000"],
        ["110113", "顺义", "110000"],
        ["110114", "昌平", "110000"],
        ["110115", "大兴", "110000"],
        ["110116", "怀柔", "110000"],
        ["110117", "平谷", "110000"],
        ["110228", "密云", "110000"],
        ["110229", "延庆", "110000"]
    ]
);

var shanghai = new Area(["310000", "上海"],
    [
        ["310101", "黄浦", "310000"],
        ["310104", "徐汇", "310000"],
        ["310105", "长宁", "310000"],
        ["310106", "静安", "310000"],
        ["310107", "普陀", "310000"],
        ["310108", "闸北", "310000"],
        ["310109", "虹口", "310000"],
        ["310110", "杨浦", "310000"],
        ["310112", "闵行", "310000"],
        ["310113", "宝山", "310000"],
        ["310114", "嘉定", "310000"],
        ["310115", "浦东", "310000"],
        ["310116", "金山", "310000"],
        ["310117", "松江", "310000"],
        ["310118", "青浦", "310000"],
        ["310120", "奉贤", "310000"],
        ["310230", "崇明", "310000"]
    ]
);

给你个完整的demo吧->
首先要写二级菜单的样式。
如下：

* {
    margin:0;
    padding:0;
}
.menu {
    height: 40px;
    line-height: 40px;
    list-style: none;
    z-index: 20;
    background: #f5f5f5;
}
.menu >li {
    width: 100px;
    position: relative;
    float:left;
    text-align: center;
}
.childMenu {
    width: auto;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    display: none;
    list-style: none;
    background: #eeeeee;
}
.menu >li:hover{
    background: #eeeeee;
}
.menu >li:hover .childMenu {
    display: block;
}
.childMenu >li:hover {
    background: #cccccc;

}

然后做好html的结构：

 <ul class = 'menu'>
    <li>
        菜单
        <ul class = 'childMenu'>
            <li>子菜单一</li>
            <li>子菜单二</li>
        </ul>
    </li>
    <li>
        菜单
        <ul class = 'childMenu'>
            <li>子菜单一</li>
            <li>子菜单二</li>
        </ul>
    </li>
    <li>
        菜单
        <ul class = 'childMenu'>
            <li>子菜单一</li>
            <li>子菜单二</li>
        </ul>
    </li>
</ul>

然后用js代码动态添加节点。
注意，为了方便遍历，这里的数据结构做了一点修改。

function Area(province,city) {
    this.province = province;
    this.city = city;
}

var area = [];
area[0] = new Area(["110000","北京"],
    [
        ["110101", "东城", "110000"],
        ["110102", "西城", "110000"],
        ["110105", "朝阳", "110000"],
        ["110106", "丰台", "110000"],
        ["110107", "石景山", "110000"],
        ["110108", "海淀", "110000"],
        ["110109", "门头沟", "110000"],
        ["110111", "房山", "110000"],
        ["110112", "通州", "110000"],
        ["110113", "顺义", "110000"],
        ["110114", "昌平", "110000"],
        ["110115", "大兴", "110000"],
        ["110116", "怀柔", "110000"],
        ["110117", "平谷", "110000"],
        ["110228", "密云", "110000"],
        ["110229", "延庆", "110000"]
    ]
);

area[1] = new Area(["310000", "上海"],
    [
        ["310101", "黄浦", "310000"],
        ["310104", "徐汇", "310000"],
        ["310105", "长宁", "310000"],
        ["310106", "静安", "310000"],
        ["310107", "普陀", "310000"],
        ["310108", "闸北", "310000"],
        ["310109", "虹口", "310000"],
        ["310110", "杨浦", "310000"],
        ["310112", "闵行", "310000"],
        ["310113", "宝山", "310000"],
        ["310114", "嘉定", "310000"],
        ["310115", "浦东", "310000"],
        ["310116", "金山", "310000"],
        ["310117", "松江", "310000"],
        ["310118", "青浦", "310000"],
        ["310120", "奉贤", "310000"],
        ["310230", "崇明", "310000"]
    ]
);

function createMenu(){
    var liNode = "";
    for(var i = 0;i<area.length;i++) {
        var nodeStr = "";
        for(var j = 0;j<area[i].city.length;j++) {
            nodeStr+='<li>'+area[i].city[j][1]+'</li>';
        }
        liNode +=
            "<li>" + area[i].province[1]+
                "<ul  class = 'childMenu'>"+
                  nodeStr+
                "</ul>"+
            "</li>";
    }

    document.body.innerHTML = "<ul class = 'menu'>"+ liNode +"</ul>";
}

createMenu();

最终效果：
鼠标经过显示二级菜单。

Answer 2

你这数组省份和地市没有关联关系啊。id都不能对应，如果下面city对应后面那个id是对应的省份的id，那还好弄。现在这个乱七八糟的无法言语。

Answer 3

城市数据是一个对象数组，每个数组元素是一个小数组，用数组的方式遍历就行，写个两层循环就能解析数据了

Answer 4

只能做模糊匹配了