Динамическая совокупность выпадающего меню с Bootstrap

Я делаю эту веб-страницу с помощью Bootstrap для обработки настройки макета. Он использует раскрывающееся меню, которое я пытаюсь заполнить живой информацией из других источников.

Сейчас я делаю это так на 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>

И на 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);
  }

script вызывается непосредственно перед загрузкой script в конце части HTML:

<script>queryProjects();</script>
<script src="js/bootstrap.min.js"></script>

Результаты выглядят так:

Информация есть, но затенение при наведении курсора и ссылки на элементы больше не работают. Я хочу, чтобы это выглядело так, как если бы информация о выпадающем списке была жестко указана в файле HTML:

Есть ли прямой способ заставить dropdown вести себя так, как если бы он был заселен непосредственно из HTML?

Спасибо!

Ответ 1