Question

使用最新的Bootstrap 3.3.6和jQuery库1.11.3，当用户选择其中一个选项时，我试图让下拉列表显示所选的值。到目前为止，看起来下拉ul根本不会显示。

HTML：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select One
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
    <li><a href="#" data-value="a">A</a></li>
    <li><a href="#" data-value="b">B</a></li>
  </ul>
</div>

JS：

    $(".dropdown-menu li a").click(function() {
      $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
      $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

我在这个线程中提到了一个正常工作的JS函数，但无济于事：How to Display Selected Item in Bootstrap Button Dropdown Title

当前的JSFiddle：https://jsfiddle.net/9xzqdry9/

Answer 1

你只需要在你的jquery.js之后引用你的bootstrap.js

$(".dropdown-menu li a").click(function() {
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select One
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
    <li><a href="#" data-value="a">A</a></li>
    <li><a href="#" data-value="b">B</a></li>
  </ul>
</div>

Answer 2

我看到你 当前的JSFiddle 您应该首先导入jQuery而不是 Boostrap.js ！了！

Bootstrap下拉列表未显示选定值

2 个答案: