Bootstrap 3 dropdown


I’m trying to get a bootstrap 3 dropdown to work with no luck. I was wondering if anyone had a simple example including html and required javascript as well as what bootstrap library they have installed. I can get the dropdown to come up, and when I click the dropdown button the option list is shown, but I can’t figure out how to display the selected option. Is this something that should require javascript in addition to the bootstrap html?

Here’s my html:

  <div class="dropdown">
       <button class="btn btn-default dropdown-toggle" type="button" id="mt-command-dd"
             <span class="caret"></span>
       <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
             <li role="presentation">
                <a role="menuitem" tabindex="-1"
                    id="config-request-command" href="#">Option 1</a>
             <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Option 2</a>
             <li role="presentation">
               <a role="menuitem" tabindex="-1" href="#">Option 3</a>
             <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Option 4</a>
             <li role="presentation" class="divider"></li>
             <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Other</a>


Hey, what exactly is the problem your having? That code seems to work in bootply:


Are you trying to mimic the behaviour of a dropdown (radio) menu? You could use jQuery to do something like:

// add a class="menuitem" to your <li>{
    'click .menuitem': function (event) {


hellstad’s solution is pretty much the same as what I did to achieve the same behavior with the bootstrap dropdowns. In my solution I generalized the event and the code to apply to every instance of a dropdown on my page.

The reason this isn’t the default behavior as I believe the dropdown you’re using is intended as a navigation menu.


Ah, so should I be using a different type of bootstrap dropdown?

Also, I think part of my problem is the $(’#abc’) syntax doesn’t work for me. It never returns any objects.



The selected value isn’t displayed in the button element after selection. It still says “Command”.


This is jQuery. $('#abc') for example would be selecting a DOM element with id="abc". The code hellstad posted should work as long as your button does in fact have id="mt-command-dd". Is the markup you posted correct?


Well if you don’t actually have an element with id="mt-command-dd" then it certainly won’t return an element that doesn’t exist. Use whatever id your button really has, or any other selector that will return that element.


Ah, had a typo in my markup. Thanks, I’m now able to use jquery constructs within my event handler.


hellstad’s suggestion works except I had to use without the ending parens to read the text value. Overall that I think that was my biggest issue, understanding when parens are needed and when not.



Sorry, I didn’t test the code. I get confused sometimes too. works a little different to using the jQuery selector. To use the same syntax for everything you can also do $(


hello guys,

i was having the same problem but don’t really get the solution. so if i use the html above and

‘click .menuitem’: function (event) {

in my in the js file it should work? because for me, it doesn’t (still shows “command” instead of the picked option whenever i click on an option)

would be great if you could explain again :slight_smile:


A lot can change in three years. Please open a new topic and explain your problem. Thanks :slight_smile:.


Locking this topic now.