Default selection in bootstrap dropdown

Question

I am using a bootstrap dropdown, and need to have the first option as default. The following doesn't work.

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    CHOOSE FEATURE
    <span class="caret"></span>
</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li selected="selected"><a>Feature 1</a></li>
    <li><a>Feature 2</a></li>
    <li><a>Feature 3</a></li>
    <li><a>Feature 4</a></li>
    <li><a>Feature 5</a></li>
    <li><a>Feature 6</a></li>
</ul>

Try this: http://stackoverflow.com/questions/28474857/select-default-value-in-drop-down-bootstrap-3 — yuriy636, May 28 '16 at 22:05
see answer here http://stackoverflow.com/questions/13437446/how-to-display-selected-item-in-bootstrap-button-dropdown-title — Irshad Babar, Mar 19 '17 at 03:55

score 22 · Accepted Answer · answered May 28 '16 at 22:08

Unfortunately, I don't believe you'll be able to achieve this effect using a conventional bootstrap drop down menu.

Unlike a traditional HTML "select", a bootstrap drop down is typically used to group a series of links under a header. When you click a menu item, it doesn't become selected as such, rather an action is usually performed.

I'd advise just using a straightforward HTML select, but borrowing styles from the bootstrap CSS library so it looks consistent. Something along the lines of:

<select class="bootstrap-select">
  <option value="1" selected="selected">Feature 1</option>
  <option value="2">Feature 2</option>
  <option value="3">Feature 3</option>
  <option value="4">Feature 4</option>
</select>

Thank you. Looks like this is the best option. I used css styling from the following to approach that of bootstrap: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript and http://stackoverflow.com/questions/10542576/how-to-change-the-font-size-of-the-list-not-the-initial-view — Cybernetic, May 28 '16 at 23:04

score 3 · Answer 2 · edited Aug 09 '17 at 02:26

3

Try this:

$(document).ready(function() {  
   $(".dropdown .dropdown-menu li a")[0].click();
});

This will always select your first li

edited Aug 09 '17 at 02:26

abagshaw

6,162
4
38
76

answered Aug 09 '17 at 00:36

Nitish Sahu

81
4

score 1 · Answer 3 · answered May 28 '16 at 22:09

The attribute "selected" only works in <select> elements. Unfortunately it does not work in lists.

I believe what you want is:

<select class="form-control" name="features">
    <option value="" selected>Feature 1</option>
    <option value="">Feature 2</option>
    <option value="">Feature 3</option>
    <option value="">Feature 4</option>
    <option value="">Feature 5</option>
    <option value="">Feature 6</option>
</select>

nice, `form-control` worked! – math scat Jun 07 '22 at 10:13 — math scat, Jun 07 '22 at 10:13

sanjaya janakanatha · Answer 4 · 2021-02-15T14:02:05.717

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <?php //your loop start here{ ?>
        <a id="some_id" class="dropdown-item" href="#"> <?php echo $yourvalue ?> </a>
    <?php //your loop end here  } ?>
  </div>
</div>

  .....

</html>

<script>                                                         
    $(document).ready(function() {  
    $("#some_id")[0].click();
     });
 </script>

Default selection in bootstrap dropdown

4 Answers4

Linked