javascript - jquery 下拉 btn bootstrap 设置默认值

Question

我有如下下拉菜单

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

当页面第一次加载时，如何将默认下拉值添加为 value1 而不是 Items

Answer 1

给你!

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