Bootstrap Dropdown selected item

Question

I have recently started using Bootstrap and I'm looking into the dropdown menu functionality.

I don't know if I'm missing something but I would have thought the dropdown menu button should show what has been selected. For example, if I have the following dropdown

Select Item <---This is the button
-Item 1 <---This is the item
-Item 2 <---This is the item
-Item 3 <---This is the item

If the user selects "Item 1" then I would expect the button text to change to "Item 1" so the user knows what's been selected, whereas on my dropdown when the user clicks the item, the dropdown menu just closes and the text doesn't change. This seems like something basic that should happen so I thought I am missing something however, the examples on the Bootstrap website seems to show the same thing, the fact that it does this, I fail to see the point of the dropdown.

When Googling around for this, the only implementation seems to be long convoluted javascript to do what I would expect to happen, is this correct or is there something I am missing somewhere?

Answer 1

The functionality that you want, based upon your description, is a select box. The bootstrap drop down is more for collapsing lists (think nav bars).

You can go with a plugin like bootstrap-select, or you can write your own functionality (I would recommend writing in your functionality).

Here is a small mockup of what you can do to simulate a select box: https://jsfiddle.net/eanzfcu1/

Basically you are just listening for an onclick for the li items of the list, then changing the ul text to whatever the li 's was.

Answer 2

The Bootstrap dropdown is there for a nav/menu that is style consistent with the other Buttons.

If you want it to have "select" behavior, it's not really a lot of "long convoluted javascript". Just a few lines of jQuery to hook it up::

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.btn-group').find('.dropdown-toggle')
      .html(selText+' <span class="caret"></span>');
});

http://www.codeply.com/go/Msi58Gy11u

OFC, the select input is always there for "select" behavior too.

Answer 3

sounds like maybe you are looking for a plugin. I really like the bootstrap-multiselect.

here is the link to it.

http://davidstutz.github.io/bootstrap-multiselect/

I copied pasted one of the simple examples below just run the code snippet

  $(document).ready(function() { $('#example-getting-started').multiselect(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <select id="example-getting-started" > <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select>