Question

我的HTML代码中有一些表单字段以及Bootstrap下拉菜单。我希望用户选择的数字反映在按钮的文本上。我编写了以下代码，但它似乎没有起作用。

以下是下拉列表的HTML代码：

awakeFromNib()

JavaScript的：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" value="Number of partners :" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  Number of partners :
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li id="no" value="2"><a href="#">2</a></li>
    <li id="no" value="3"><a href="#">3</a></li>
    <li id="no" value="4"><a href="#">4</a></li>
    <li id="no" value="5"><a href="#">5</a></li>
    <li id="no" value="6"><a href="#">6</a></li>
    <li id="no" value="7"><a href="#">7</a></li>
    <li id="no" value="8"><a href="#">8</a></li>
  </ul>
</div>

编辑1：我发布我的整个代码仅供参考：

$(".dropdown-toggle").dropdown();

$('.dropdown-toggle').on( 'click', 'a', function() {
  var text = $(this).html();
  var htmlText = text + ' <span class="caret"></span>';
  $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

Answer 1

您需要更改选择以将clickClickListener添加到。您的.dropdown-toggle按钮不包含下拉列表或锚标记;你的<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">确实如此。

变化：

$('.dropdown-toggle').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

为：

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

bootstrap下拉列表 - 选中时文本不会更改

1 个答案: