Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamic population of dropdown menu with Bootstrap

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:

Not working

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:

Working

Is there a direct way to make the dropdown behave as if it was populated directly from the HTML?

Thanks!

like image 807
buzoherbert Avatar asked May 28 '14 01:05

buzoherbert


People also ask

How do I increase the size of my drop down menu?

The simple solution is to widen the column that the drop-down box is in. You can adjust the column manually by dragging the border of the column header.

How do I add a drop down menu in bootstrap?

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown. Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.

How do I change the position of a drop down menu in bootstrap?

Use data-offset or data-reference to change the location of the dropdown.


1 Answers

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);
          }
like image 168
buzoherbert Avatar answered Sep 28 '22 02:09

buzoherbert