Default selection in bootstrap dropdown

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>

4 thoughts on “Default selection in bootstrap dropdown”

  1. 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>
    
    Reply
  2. 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>
    
    Reply
  3. <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>
    
    
    <script>                                                         
        $(document).ready(function() {  
        $("#some_id")[0].click();
         });
     </script>
    
    Reply

Leave a Comment