本文實例講述了javascript實現dom動態創建省市縱向列表菜單的方法。分享給大家供大家參考。具體實現方法如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>動態創建縱向列表</title> <style type="text/css"> a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { width: 100px; border: 1px solid #CCC; border-bottom:none;} #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; } #menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px;border:1px solid #ccc; border-bottom:none; } #menu ul li.current ul { display:block;} #menu ul li ul li{text-align:center;} /*設置城市內容居中*/ </style> <script type="text/javascript"> var provs = { "江西省": ["南昌市", "景德鎮", "九江", "鷹潭", "萍鄉", "新馀", "贛州", "吉安", "宜春", "撫州", "上饒"], "福建省": ["福州", "廈門", "莆田", "三明", "泉州", "漳州", "南平", "龍巖", "寧德"], "河北省": ["石家莊", "邯鄲", "邢台", "保定", "張家口", "承德", "廊坊", "唐山", "秦皇島", "滄州", "衡水"], "四川省": ["成都市", "自貢市", "攀枝花市", "泸州市", "德陽市", "綿陽市", "廣元市", "遂寧市", "內江市", "樂山市", "南充市", "眉山市", "宜賓市", "廣安市", "達州市", "雅安市", "巴中市", "資陽市", "阿壩藏族羌族自治州", "甘孜藏族自治州", "涼山彝族自治州"], "山西省": ["太原市", "大同市", "陽泉市", "長治市", "晉城市", "朔州市", "晉中市", "運城市", "忻州市", "臨汾市", "呂梁市"], "內蒙古": ["呼和浩特市", "包頭市", "烏海市", "赤峰市", "通遼市", "鄂爾多斯市", "呼倫貝爾市", "巴彥淖爾市", "烏蘭察布市", "興安盟", "錫林郭勒盟", "阿拉善盟"], "海南省": ["海口市", "三亞市"], "重慶市": ["重慶"], "貴州省": ["貴陽市", "六盤水市", "遵義市", "安順市", "銅仁地區", "黔西南布依族苗族自治州", "畢節地區", "黔東南苗族侗族自治州", "黔南布依族苗族自治州"], "甘肅省": ["蘭州市", "嘉峪關市", "金昌市", "白銀市", "天水市", "武威市", "張掖市", "平涼市", "酒泉市", "慶陽市", "定西市", "隴南市", "臨夏回族自治州", "甘南藏族自治州"], "青海省": ["西寧市", "海東地區", "海北藏族自治州", "黃南藏族自治州", "海南藏族自治州", "果洛藏族自治州", "玉樹藏族自治州", "海西蒙古族藏族自治州"], "寧夏自治區": ["銀川市", "石嘴山市", "吳忠市", "固原市", "中衛市"] }; function iniEvent() { var provUL = document.getElementById("prov"); if (provUL) { var allli = 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", ""); } } } } function loadData() { var provUL = document.getElementById("prov"); var nIndex = 0; for (var key in provs) { var provLi = document.createElement("li"); provLi.id = "provLI" + nIndex; provLi.innerHTML = "<a href='#'>" + key + "</a>"; provUL.appendChild(provLi); //添加省份li //================添加城市======================== var citys = provs[key]; if (citys.length > 0) { var cityUL = document.createElement("ul"); var maxLength = 0; //存放最大城市內容的長度，以便後面設置cityUL的最大寬度，達到寬度自適應 for (var i = 0; i < citys.length; i++) { var cityName = citys[i]; if (cityName.length > maxLength) { maxLength = cityName.length; //提取最大長度的城市 } var cityLI = document.createElement("li"); cityLI.id = "cityLI" + i; cityLI.innerHTML = "<a href='#'>" + 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> <body onload ="loadData()"> <div id="menu"> <ul id="prov"> </ul> </div> </body> </html>希望本文所述對大家的javascript程序設計有所幫助。