Of Stack

javascript implements the method of dom to dynamically create provincial and municipal longitudinal list menu

  • 2020-06-12 08:31:20
  • OfStack

An example of javascript is given to illustrate dom's method of dynamically creating provincial and municipal vertical list menus. Share to everybody for everybody reference. Specific implementation methods are as follows: 


<!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> Create vertical lists dynamically </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;}  /* Center the city content */
</style>
<script type="text/javascript">
var provs = { " Jiangxi province ": [" nanchang ", " jingdezhen ", "9 jiang ", " yingtan ", " pingxiang ", " xinyu ", " ganzhou ", " gian ", " yichun ", " fuzhou ", " shangrao "],
  " Fujian province ": [" fuzhou ", " xiamen ", " putian ", "3 Ming ", " quanzhou ", " zhangzhou ", " nanping ", " longyan ", " ningde "],
  " In hebei province ": [" shijiazhuang ", " handan ", " xingtai ", " baoding ", " zhangjiakou ", " chengde ", " langfang ", " tangshan ", " qinhuangdao ", " cangzhou ", " hengshui "],
  "4 Sichuan province ": [" chengdu ", " zigong ", " Panzhihua. ", " While luzhou ", " Deyang city ", " Mianyang city ", " In guangyuan city ", " Suining city ", " neijiang ", " leshan ", " nanchong ", " Meishan city ", " Yibin city ", " paper ", " dazhou ", " yaan ", " bazhong ", " ziyang ", " Aba Tibetan and Qiang Autonomous Prefecture ", " Ganzi Tibetan Autonomous Prefecture ", " Liangshan Yi Autonomous Prefecture "],
  " Shanxi Province ": [" Taiyuan city ", " datong ", " Yangquan city ", " Changzhi city ", " jincheng ", " shuozhou ", " Jinzhong city ", " yuncheng ", " Xinzhou city ", " linfen ", " Luliang city "],
  " Inner Mongolia ": [" Hohhot ", " Baotou city ", " Wuhai city ", " Chifeng city ", " Tongliao city ", " Ordos City ", " Hulunbuir ", " Bayannur City ", " Ulanqab ", " Xingan league ", " Xilingol League ", " La shan au "],
  " Hainan province, ": [" Haikou city ", "3 The city "], " chongqing ": [" chongqing "], 
  " The guizhou province ": [" Guiyang city ", "6 Plate of water, ", " zhunyi ", " Anshun city ", " Tongren region ", " Buyi and Miao Autonomous Prefecture, Southwest Guizhou Province ", " bijie ", " Qiandongnan Miao and Dong Autonomous Prefecture ", " Qiannan Buyi and Miao Autonomous Prefecture "],
  " Gansu province ": [" Lanzhou city ", " Jiayuguan city ", " The singularity ", " baiyin ", " tianshui ", " wuwei ", " zhangye ", " Pingliang city ", " Jiuquan city ", " Qingyang city ", " Dingxi city ", " Longnan city ", " Linxia Hui Autonomous Prefecture ", " Gannan Tibetan Autonomous Prefecture "],
  " Qinghai province ": [" xining ", " Whereas haidong539 area ", " Haibei Tibetan Autonomous Prefecture ", " Huangnan Tibetan Autonomous Prefecture ", " Hainan Tibetan Autonomous Prefecture ", " Guoluo Tibetan Autonomous Prefecture ", " Yushu Tibetan Autonomous Prefecture ", " Haixi Mongolian and Tibetan Autonomous Prefecture "],
  " Ningxia Autonomous Region ": [" yinchuan ", " shizuishan ", " Wuzhong city ", " Natural guyuan city ", " Central city "]
};
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 () { // Mouse over the display layer 
        this.className = "current";
      }
      node.onmouseout = function () { // Hide the layer when the mouse leaves 
        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);    // Add the provinces li
    //================ Add the city ========================
    var citys = provs[key];
    if (citys.length > 0) {
      var cityUL = document.createElement("ul");
      var maxLength = 0; // Store the length of the maximum city content for later setting cityUL The maximum width of, to achieve the width of adaptive 
      for (var i = 0; i < citys.length; i++) {
        var cityName = citys[i];
        if (cityName.length > maxLength) {
          maxLength = cityName.length; // Extract the maximum length of the city 
        }
        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;
        // Here is multiplied 20 Mainly according to the 1 A word 20px To calculate 
      }
      maxLength = maxLength + "px"; // Pixelated px The suffix 
      cityUL.style.width= maxLength; // Set up the cityUL Maximum width of 
      provLi.appendChild(cityUL); // Add the city UL
    }
    nIndex++;
  }
  iniEvent();  // Initialization event 
}
</script>
</head>
<body onload ="loadData()">
<div id="menu">
<ul id="prov">
</ul>
</div>  
</body>
</html>

Hopefully, this article has been helpful in your javascript programming.

Related articles: