Html 是否在下拉列表中显示当前选定的选项？

我有以下代码：

<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>

我想做的是让它正常工作，这样如果用户单击下拉列表并选择选项1，选项1将显示在下拉列表中，而不是小插入符号图示符中

---

这是使用引导，只是为了澄清。

您使用引导选择而不是引导下拉列表：

---

你需要添加一些JS魔法。这里是jQuery风格的

jQuery

你的HTML

---

你能给我一把小提琴吗，这是自举吗？然后您必须手动执行\Hmm，由于某些原因，这不起作用。我保存了JS并确保添加了它，但当我单击下拉列表中的某个选项时，什么也没有发生。我复制的代码与您完全一样。@connormartin您是否已确保我的jquery片段包装在$document.readyfunction{}；block？@connormartin如果失败，请尝试将我的代码隔离在页面的标题中，看看我更新的答案中的内容。@u r s u s u s我正在使用引导，也许这就是它不起作用的原因？

$(".dropdown-menu li a").click(function(){
  $(this).parents(".input-group-btn").find('.dropdown-toggle').text($(this).text());
  $(this).parents(".input-group-btn").find('.dropdown-toggle').val($(this).text());
});

<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>

<script type="text/javascript">

        $(document).ready(function () {

            $(".dropdown-menu li a").click(function () {
                $(this).parents(".input-group-btn").find('.dropdown-toggle').text($(this).text());
                $(this).parents(".input-group-btn").find('.dropdown-toggle').val($(this).text());
            });

        });

 </script>