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>

Narcissus

Try this: #28475357 – Novikoff

see answer here #13437946 – Wayless

Answer 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>

Weider

Thank you. Looks like this is the best option. I used css styling from the following to approach that of bootstrap: #1895976 and #10543076 – Narcissus

This doesn't answer. – Desuetude

Answer 2

Try this:

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

This will always select your first li

Orient

Answer 3

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>

Stockwell

nice, form-control worked! – Stagecraft

Answer 4

I accomplished this with Flask + Python + Jinja stack this way, if you have a different back end the same logic could still apply. Use an if statement to check if the value is the one you wanted, and if it is, set it as selected. In my instance I'm setting the topic to ZTM-Linux below.

        <select class="form-control" id="Topic" name="Topic">
            <option disabled>Choose a Topic</option>
            {% for each in query %}
            <option value="{{ each.topic }}" {% if each.topic == "ZTM-Linux" %}selected{% endif %}>{{ each.topic }}</option>
            {% endfor %}
        </select>
        {% endif %}

Inofficious

Answer 5

<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>

Frazier

Answer 6

You can us JS for the same.

    $(document).ready(function() {
      var defaultItemText = "Another action";
      $('#dropdownMenuButton').text(defaultItemText);
      $('.dropdown-item').on('click', function(event) {
          event.preventDefault(); 
          $('#dropdownMenuButton').text($(this).text());
      });
 });

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Dropdown button
   </button>
   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#" id="action">Action</a>
      <a class="dropdown-item" href="#" id="anotherAction">Another action</a>
      <a class="dropdown-item" href="#" id="somethingElse">Something else here</a>
   </div>
</div>

Batho