在Bootstrap Drop Down中设置默认值

Question

我正在使用Bootstrap构建一个应用程序。 在这个应用程序中，我有一个控件，可以转换英制和公制值之间的值。 为实现这一目标，我目前有以下内容：

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span>  
    </button>
    <ul class="dropdown-menu dropdown-menu-right" role="menu">
      <li><a href="#" data-type="lb">Pounds</a></li>
      <li><a href="#" data-type="kg">Kilograms</a></li>
    </ul>
  </div>
  <input id="theValue" type="hidden" data-start-type="kg" />
</div>

当从服务器填充控件theValue元素时，它将是“lb”或“kg”。 我想，这样的选择的菜单选项是基于价值，使其theValue当页面最初加载。 换句话说，我不希望看到文本“动作”。 相反，我需要在视图加载时选择磅或千克。

我如何从jQuery做到这一点？

Answer 1

使用jQuery，您将选择theValue元素，访问其data-start-type属性，找到具有相同data-type属性a元素，然后使用其text值来设置按钮的文本。 你需要一种独特的方法来识别jQuery中的选择按钮，所以给它一个id ; 我用过“actionButton”。

$(document).ready(function(){
    var data_start_type = $('#theValue').attr('data-start-type');
    var $data_type_elem = $('[data-type='+data_start_type+']');
    $('#actionButton').text($data_type_elem.text());
});

这是一个jsFiddle： http ： //jsfiddle.net/7g9k2dwx/