[英]Dynamic list in dropdown menu
I want to drop down a menu on link click, I have searched and found all the dropdown menus are static list, but i want to make the list dynamically on link click, something like a function called to fill the list of the dropdown menu when clicking on the link. 我想在链接单击上下拉菜单,我搜索并发现所有下拉菜单都是静态列表,但是我想在链接单击上动态创建列表,就像一个函数,该函数在填充时单击以填充下拉列表点击链接。 What i have found is: 我发现的是:
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li class='last'><a href='#'><span>Product 3</span></a></li>
</ul>
but i want to replace the inner list, which are in the above code (Product1, Product2, Product3) with dynamic list. 但是我想用动态列表替换上面代码(Product1,Product2,Product3)中的内部列表。
I am making the following list 我在做下面的清单
document.getElementById("listPaths").innerHTML += "<ul style='list-style-type:circle;color: white' class='cl-effect-1'><br/><br/><br/><br/><br/><li>" + "<a href='#' style='text-decoration: none;' onclick=" + "'getRoutesList(" + countList + ");'>" + "Path " + countList + "</a>" + "</li></ul>";
and i want to make a function that fills a menu list when link is clicked.I can't insert an inner list inside my listPaths using innerHTML. 我想做一个在单击链接时填充菜单列表的函数。我无法使用innerHTML在我的listPaths中插入内部列表。
Here is the working sample: 这是工作示例:
http://jsfiddle.net/q1hrf314/ http://jsfiddle.net/q1hrf314/
<input type="button" onclick="updateList()" value="Update List"/>
<ul>
<li id="listPaths">
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li class='last'><a href='#'><span>Product 3</span></a></li>
</ul>
</li>
</ul>
var countList = 1;
function getRoutesList(countList) {
alert('countList = ' + countList);
}
function updateList(){
document.getElementById("listPaths").innerHTML += "<ul style='list-style-type:circle;color: white' class='cl-effect-1'><br/><br/><br/><br/><br/><li>" + "<a href='#' style='text-decoration: none;' onclick=" + "'getRoutesList(" + countList + ");'>" + "Path " + countList + "</a>" + "</li></ul>";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.