javascript实现dom动态创建省市纵向列表菜单的方法
本文实例讲述了javascript实现dom动态创建省市纵向列表菜单的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>动态创建纵向列表</title>
<styletype="text/css">
a{color:#000;text-decoration:none;}
a:hover{color:#F00;}
#menu{width:100px;border:1pxsolid#CCC;border-bottom:none;}
#menuul{list-style:none;margin:0px;padding:0px;}
#menuulli{background:#eee;padding:0px8px;height:26px;line-height:26px;border-bottom:1pxsolid#CCC;position:relative;}
#menuulliul{display:none;position:absolute;left:100px;top:0px;width:100px;border:1pxsolid#ccc;border-bottom:none;}
#menuulli.currentul{display:block;}
#menuulliulli{text-align:center;}/*设置城市内容居中*/
</style>
<scripttype="text/javascript">
varprovs={"江西省":["南昌市","景德镇","九江","鹰潭","萍乡","新馀","赣州","吉安","宜春","抚州","上饶"],
"福建省":["福州","厦门","莆田","三明","泉州","漳州","南平","龙岩","宁德"],
"河北省":["石家庄","邯郸","邢台","保定","张家口","承德","廊坊","唐山","秦皇岛","沧州","衡水"],
"四川省":["成都市","自贡市","攀枝花市","泸州市","德阳市","绵阳市","广元市","遂宁市","内江市","乐山市","南充市","眉山市","宜宾市","广安市","达州市","雅安市","巴中市","资阳市","阿坝藏族羌族自治州","甘孜藏族自治州","凉山彝族自治州"],
"山西省":["太原市","大同市","阳泉市","长治市","晋城市","朔州市","晋中市","运城市","忻州市","临汾市","吕梁市"],
"内蒙古":["呼和浩特市","包头市","乌海市","赤峰市","通辽市","鄂尔多斯市","呼伦贝尔市","巴彦淖尔市","乌兰察布市","兴安盟","锡林郭勒盟","阿拉善盟"],
"海南省":["海口市","三亚市"],"重庆市":["重庆"],
"贵州省":["贵阳市","六盘水市","遵义市","安顺市","铜仁地区","黔西南布依族苗族自治州","毕节地区","黔东南苗族侗族自治州","黔南布依族苗族自治州"],
"甘肃省":["兰州市","嘉峪关市","金昌市","白银市","天水市","武威市","张掖市","平凉市","酒泉市","庆阳市","定西市","陇南市","临夏回族自治州","甘南藏族自治州"],
"青海省":["西宁市","海东地区","海北藏族自治州","黄南藏族自治州","海南藏族自治州","果洛藏族自治州","玉树藏族自治州","海西蒙古族藏族自治州"],
"宁夏自治区":["银川市","石嘴山市","吴忠市","固原市","中卫市"]
};
functioniniEvent(){
varprovUL=document.getElementById("prov");
if(provUL){
varallli=provUL.getElementsByTagName("li");
for(i=0;i<allli.length;i++){
node=allli[i];
node.onmouseover=function(){//鼠标经过时显示层
this.className="current";
}
node.onmouseout=function(){//鼠标离开时隐藏层
this.className=this.className.replace("current","");
}
}
}
}
functionloadData(){
varprovUL=document.getElementById("prov");
varnIndex=0;
for(varkeyinprovs){
varprovLi=document.createElement("li");
provLi.id="provLI"+nIndex;
provLi.innerHTML="<ahref='#'>"+key+"</a>";
provUL.appendChild(provLi);//添加省份li
//================添加城市========================
varcitys=provs[key];
if(citys.length>0){
varcityUL=document.createElement("ul");
varmaxLength=0;//存放最大城市内容的长度，以便后面设置cityUL的最大宽度，达到宽度自适应
for(vari=0;i<citys.length;i++){
varcityName=citys[i];
if(cityName.length>maxLength){
maxLength=cityName.length;//提取最大长度的城市
}
varcityLI=document.createElement("li");
cityLI.id="cityLI"+i;
cityLI.innerHTML="<ahref='#'>"+cityName+"</a>";
cityUL.appendChild(cityLI);
}
if(maxLength<=6){
maxLength=100;
}
else{
maxLength=maxLength*20;
//这里乘以20主要是按一个字20px来算
}
maxLength=maxLength+"px";//加上像素的px后缀
cityUL.style.width=maxLength;//设置cityUL的最大宽度
provLi.appendChild(cityUL);//添加城市UL
}
nIndex++;
}
iniEvent();//初始化事件
}
</script>
</head>
<bodyonload="loadData()">
<divid="menu">
<ulid="prov">
</ul>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。