CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Cybernetic
Cybernetic

Reputation: 13354

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>

Upvotes: 15

Views: 51117

Answers (6)

k c
k c

Reputation: 11

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>

Upvotes: 0

codyc
codyc

Reputation: 31

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

Upvotes: 1

sanjaya janakanatha
sanjaya janakanatha

Reputation: 1

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

Upvotes: 0

Nitish Sahu
Nitish Sahu

Reputation: 91

Try this:

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

This will always select your first li

Upvotes: 4

Charlie
Charlie

Reputation: 1125

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>

Upvotes: 1

Jason Graham
Jason Graham

Reputation: 914

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>

Upvotes: 23

Related Questions