Bootstrap 选择后不显示下拉选项

Question

我有以下表格，当单击下拉菜单并选择一个选项时，该选项不会出现在顶部：

<div class="input-group">
<div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">+1 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" id="1">US: +1</a>
        </li>
        <li><a href="#" id="44">UK: +44</a>
        </li>
    </ul>
</div>
<input type="text" class="form-control" aria-label="..." placeholder="Your   
   phone number"> <span class="input-group-btn">
<button class="btn btn-default" type="button">SUBMIT</button>
</span>
</div>
</div>

jquery

   // Load dialog on page load
   $('#basic-modal-content').modal();

   // Load dialog on click
   $('#basic-modal .basic').click(function (e) {
   $('#basic-modal-content').modal();
   return false;
   });

jsfiddle

Answer 1

这是一个 Bootply，它会在您选择新按钮时更改按钮 html 属性。

Bootply

代码：

HTML:

<div class="input-group">
  <div class="input-group-btn">
    <button id="label" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">+1 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#" id="1">US: +1</a>
      </li>
      <li><a href="#" id="44">UK: +44</a>
      </li>
    </ul>
  </div>
  <input class="form-control" aria-label="..." placeholder="Your   
phone number" type="text"> <span class="input-group-btn">
  <button class="btn btn-default" type="button">SUBMIT</button>
  </span>
</div>

Javascript:

$("#1, #44").click(function(e){
  $("#label").html("+" + $(this).attr("id") + " <span class='caret'></span>");
});

根据评论，我真的不知道你问题代码的第二部分是关于什么的，但是根据你点击的内容更改按钮的值非常简单。请注意，我向按钮添加了一个 id="label" 以便更轻松地访问和更改它。

希望对您有所帮助！

Bootstrap 选择后不显示下拉选项

Bootstrap dropdown option not showing after selected

jquery

twitter-bootstrap-3