如何实现级联的导航条(navigation)效果？

Question

导航条是这样的效果：中国-山东-济南 历下区 市中区 槐荫区。把鼠标放到中国上自动下拉列出全国的省份，把鼠标放到济南上自动下拉列出济南的所有区。想要这个效果的目的是让网站浏览者能很容易的跳转到不同地区。参考网站是：http://www.samulu.com/catalog/0101

Answer 1

在数据库中存储数据时
以 id | pid | area
的方式存储,
id为地区的ID,pid为该地区的父节点(若为顶级节点,如中国,则为一个不存在的值如-1).
当页面第一次加载时生成所有的顶级节点.

然后写一个页面getData.jsp,接收id,查询数据库,获取该pid值为id的所有数据,将数据排成特定格式进行返回.

[code="js"]//获取数据
function getData(id){
...
//这里也可以改为异步获取,为了代码简单,所以写成同步了.
xmlHttp.open("GET","getData.jsp?id="+id,false);
xmlHttp.send();
return xmlHttp.responseText;
...
}

//创建面板
function createPanel(id){
var content=getData(id);
//解析content的数据
...
var panel = document.createElement("div");
...
panle.innerHTML=...;
panel.className=...;
panel...;
...
document.body.appendChild(panel);
}[/code]

当鼠标移到一个节点上时,就调用createPanel方法,并将该节点在数据库中的id传过去.之后用Ajax获取数据,并生成一个div.通过得到数据生成它的内容,控制它显示的位置.就可以实现了.

大概的逻辑就是这样了.

如果觉得写得太抽象了...LZ别介意.