下面的数组,用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"]
]
};
只能做模糊匹配了
城市数据是一个对象数组,每个数组元素是一个小数组,用数组的方式遍历就行,写个两层循环就能解析数据了
你这个显然是不行的,数据结构都没有搞清楚,除非前面的都归属于北京后面全部属于上海,然后建立个索引表。但是不会有人这样搞的,明明可以用二维数组或者用其他数据结构的,干嘛把逻辑搞复杂呢?
好了,写个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();
最终效果:
鼠标经过显示二级菜单。
你这数组省份和地市没有关联关系啊。id都不能对应,如果下面city对应后面那个id是对应的省份的id,那还好弄。现在这个乱七八糟的无法言语。