如何使用javascript创建动态子菜单

how to create dynamic submenu using javascript

本文关键字：菜单 动态 创建 何使用 javascript      更新时间：2023-09-26

创建一个菜单。现在我想创建一个动态子菜单。我使用javascript从数据库调用数组。现在如何使用javascript.

连接数组元素和子菜单列表
enter code here


// Request For array from database using function gameNames()
// I define array
var gameName = new Array();
// database responses and get array list in this array.
// I dont know how to code for create a array list as a submenu
div id = "bar">
                <ul id = "ul1">
          <li class = "li1"><a href="#" class = "a1">Games</a>
                  <ul id = "submenu"><li></li></ul>     
                  </li>
          <li class = "li1"><a href="#" class = "a1">Stake</a></li>
          <li class = "li1"><a href="#" class = "a1">Max Players</a></li>      
               </ul>
          <img src = "css/images/table_menu.png" id = "tm"/>
          <div id = "rmg">Real Money Game</div>
     </div>

下面是一个演示。SubMenu()函数中的源代码将用于从数组中创建列表项。

var gameName=['Game one','Game Two','Game three']
function SubMenu(){
  //Set variable for the submenu ul element
  var Submenu = document.getElementById('submenu');
  //For loop - for each value in the array
  for(var i=0; i<gameName.length; i++){
      //Create new li/List Item
   var Item = document.createElement('li');
      //Set innerHTML for this element
   Item.innerHTML='<a href="#">'+gameName[i]+'</a>';
      //Append new element to the submenu.
   Submenu.appendChild(Item);
  }
//---Demo use Only
document.getElementsByTagName("button")[0].remove();
//---
}
<button onclick="SubMenu();">Create</button>
<ul>
<li><a href="#">Games</a>
  <ul id="submenu"></ul>
</li>
<li><a href="#">Stake</a></li>
<li><a href="#">Max PLayers</a></li>
<ul>

如果您对上面的源代码有任何疑问，请在下面留下评论，我会尽快回复您。如果这回答了您的问题，则通过标记表示赞赏。

我希望这对你有帮助。编码快乐!

相关文章：