title: Dynamic population of dropdown menu with Bootstrap
body: <p>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.</p>
  
  <p>Right now I'm doing it like  this on the html:</p>
  
  <pre><code>  &lt;ul class="nav navbar-nav"&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;Tijuana&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;
        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Site Select&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu" id="projectSelectorDropdown"&gt;
        &lt;/ul&gt;
      &lt;/li&gt;         
    &lt;/ul&gt;
  </code></pre>
  
  <p>And on Javascript:</p>
  
  <pre><code>var list = document.getElementById("projectSelectorDropdown"); 
  for (var i = 0; i &lt; 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);
    }
  </code></pre>
  
  <p>The script is being called just before the Bootstrap script at the end of the HTML part:</p>
  
  <pre><code>&lt;script&gt;queryProjects();&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The results look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/idGeJ.png" alt="Not working"></p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/BhtGt.png" alt="Working"></p>
  
  <p>Is there a direct way to make the dropdown behave as if it was populated directly from the HTML?</p>
  
  <p>Thanks!</p>