CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapdrop-down-menu
user2661518
user2661518

Reputation: 2745

jquery dropdown btn bootstrap set default value

I have dropdown like below

       <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Items
                <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">value1</a></li>
                <li><a href="#">value2</a></li>
            </ul>
        </div>

How can I add default dropdown value as value1 when page loads for first time instead of Items

Upvotes: 1

Views: 3266

Answers (1)

John Vandivier
John Vandivier

Reputation: 2426

Here you go!

//How can I add default dropdown value as value1 when page loads for first time instead of Items

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

  //trigger event
  $('.dropdown-menu li a').first().trigger('click');
});
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    Items <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">value1</a></li>
    <li><a href="#">value2</a></li>
  </ul>
</div>

Upvotes: 4

Related Questions