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下拉选项

1 个答案: