在Bootstrap Drop Down中设置默认值

时间:2015-03-23 13:00:50

标签: javascript jquery twitter-bootstrap

我正在使用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元素时,它将是&#34; lb&#34;或&#34; kg&#34;。我想这样做,以便所选菜单选项基于页面最初加载时theValue的值。换句话说,我不希望看到文字&#34; Action&#34;。相反,我需要在视图加载时选择磅或千克。

我如何从jQuery做到这一点?

1 个答案:

答案 0 :(得分:2)

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

id

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