Dynamic population of dropdown menu with Bootstrap

html, javascript, twitter-bootstrap

Solution

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);
          }

Problem

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!

Original source