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/

Answer 2

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

<强>的jQuery

$(".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());
});

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

这是 a working demo 。

编辑：您可以将其添加到您网页的head中，如此

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

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

2 个答案: