I'm doing this web page using Bootstrap to handle the layout customization. It uses a dropdown menu that I'm trying to populate with live information from elsewhere.
Right now I'm doing it like this on the html:
<ul class="nav navbar-nav">
<li class="active"><a href="#">Tijuana</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Site Select<span class="caret"></span></a>
<ul class="dropdown-menu" id="projectSelectorDropdown">
</ul>
</li>
</ul>
And on Javascript:
var list = document.getElementById("projectSelectorDropdown");
for (var i = 0; i < rows; i++){
var opt = table.getValue(i, 0);
var li = document.createElement("li");
var text = document.createTextNode(opt);
text.href = "#";
li.appendChild(text);
// alert("option " + opt);
list.appendChild(li);
}
The script is being called just before the Bootstrap script at the end of the HTML part:
<script>queryProjects();</script>
<script src="js/bootstrap.min.js"></script>
The results look like this:
The information is there, but the shading when hovering and the links on the items don't work anymore. I want it to look as it looked like when the information for the dropdown was hardcoded on the HTML file:
Is there a direct way to make the dropdown behave as if it was populated directly from the HTML?
Thanks!
Thanks for all your feedback. The dropdown wasn't working because the <li>
element has to have an <a>
element inside and i was missing that part. The only change was on the javascript part:
var list = document.getElementById("projectSelectorDropdown");
for (var i = 0; i < rows; i++){
var opt = table.getValue(i, 0);
var li = document.createElement("li");
var link = document.createElement("a");
var text = document.createTextNode(opt);
link.appendChild(text);
link.href = "#";
li.appendChild(link);
list.appendChild(li);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.