html - 在下拉列表中显示当前选择的选项？

Question

我有以下代码:

<form class="search-bar" data-example-id="search-bar">
  <div class="row">
      <div class="col-lg-6">
          <div class="input-group">
              <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
              <div class="input-group-btn">
                  <button type="button" class="btn btn-default">Search</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 dropdown-menu-right" role="menu">
                      <li><a href="#">Option 1</a></li>
                      <li><a href="#">Option 2</a></li>
                      <li><a href="#">Option 3</a></li>
                      <li><a href="#">Option 4</a></li>
                  </ul>
              </div>
          </div><!-- /.input-group -->
      </div><!-- /.col-lg-6 -->
  </div><!-- /.row -->
</form>

我想要做的是让它正常运行，这样如果用户单击下拉菜单并选择 Option 1，Option 1 将显示在下拉列表中，而不是小插入符字形。

这里使用的是 Bootstrap，只是为了澄清。

Answer 1

您使用 Bootstrap Select 而不是 Bootstrap 下拉列表:

http://silviomoreto.github.io/bootstrap-select/