Question

我有一个使用Bootstrap 3的应用程序。我想允许用户在磅和千克之间动态转换。我想默认为磅。当用户选择其他选项时，我希望操作文本成为所选选项的文本。我不知道该怎么做。目前，我有以下内容：

<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="#">Pounds</a></li>
      <li><a href="#">Kilograms</a></li>
    </ul>
  </div>
</div>

我怀疑我需要使用onclick来获得Pounds和Kilograms选项。但是，我不确定如何让下拉文本真正成为选项而不是总是说＆＃34;行动＆＃34;

Answer 1

我猜应该有一个简单的方法，但我没有在official documentation上找到它。

同时，正如您所说，您可以使用一些jQuery / JavaScript来使用onclick事件更新按钮的值：

$(".input-group-btn .dropdown-menu li a").on("click", function() {

    // go up to the li, ul, and div, and then find the button (a bit "hacky", I know)
    $(this).parent().parent().parent().find(".dropdown-toggle").html($(this).text() + ' <span class="caret">');

});

您可以在此处查看代码：http://jsfiddle.net/uvkcoybL/

在Dropstrap中使用Drop Downs和Text Fields

1 个答案: