在Bootstrap下拉菜单中设置默认值

Setting Default Value in Bootstrap Drop Down

本文关键字：设置 默认值 下拉菜单 Bootstrap      更新时间：2023-09-26

我正在用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中执行此操作？

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

相关文章：