Question

我有一个bootstrap下拉菜单，它有＆＃39; Action＆＃39;作为默认文本。当我点击其中一个下拉项目时，我希望将其设置为文本字段中的文本，但它没有。如何在选择项目后设置可见文本。

＆＃13;

<div class="btn-group">
  <button type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Active</a>
    </li>
    <li><a href="#">Not Listed</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

我会用jQuery做的。我确信有一种更有效的方法可以做到这一点，但是对于每个下拉项，你可以创建一个更改按钮文本的函数。

$(document).ready(function() {

  $('#item1').on('click', function() {
    $('#item0').text('Active');
  });

  $('#item2').on('click', function() {
    $('#item0').text('Not Listed');
  });

});

Bootply：http://www.bootply.com/kYK0FAEDFz

Answer 2

您是否尝试过传统的Select Dropdown？我相信这会实现你的目标。

<select>
<option>Action</option>
<option>Not Listed</option>
</select>

如何在选择项目时更改下拉菜单中的默认文本

2 个答案: