javascript - jQuery - 数组没有显示正确的值

Question

我有一个带有复选框的 Bootstrap 下拉菜单，这是我的 html:

<div class="button-group">
    <button type="button" class="dropdown-search-btn" data-toggle="dropdown">Option 1</button>
    <ul class="dropdown-menu">
        <li><a href="#" class="small" data-value="Option 1" tabIndex="-1"><input type="checkbox" name="makeup"/><span></span>Option 1</a></li>
        <li><a href="#" class="small" data-value="Option 2" tabIndex="-1"><input type="checkbox" name="makeup"/><span></span>Option 2</a></li>
        <li><a href="#" class="small" data-value="Option 3" tabIndex="-1"><input type="checkbox" name="makeup"/><span></span>Option 3</a></li>
        <li><a href="#" class="small" data-value="Option 4" tabIndex="-1"><input type="checkbox" name="makeup"/><span></span>Option 4</a></li>
        <li><a href="#" class="small" data-value="Option 5" tabIndex="-1"><input type="checkbox" name="makeup"/><span></span>Option 5</a></li>
    </ul>
</div>

我的问题是我试图用下拉列表中当前选中的任何内容更改下拉按钮文本。

这是我的 jQuery，用于获取选中的复选框的值并将它们存储在数组中:

$(function(){
        $(".dropdown-menu li a").click(function(){
            var selection = [];
              $.each($("input[name='makeup']:checked"), function(){            
                    selection.push($(this).val());
                    $(".dropdown-search-btn").text(selection.join(", ")); 
              });
       });
    });

这似乎有效，它在控制台中显示了正确的值。但是，按钮文本未正确更改。例如，如果数组的值为“选项 1、选项 2、选项 3”，它将把按钮文本更改为“开、开、开”，而不是数组中的内容。在搜索并弄乱了几个小时之后，我失去了想法，我无法弄清楚为什么它没有输出正确的值。

如有任何帮助，我们将不胜感激。

Answer 1

如果缺少 value 属性，则选中复选框的默认值为“on”。

你想要的是它的父 anchor 的文本，你可以这样得到:

$.each($("input[name='makeup']:checked"), function() {
  selection.push($(this).parent().text());
});
$(".dropdown-search-btn").text(selection.join(", "));

片段:

$(function() {
  $(".dropdown-menu li a").click(function() {
    var selection = [];
    $.each($("input[name='makeup']:checked"), function() {
      selection.push($(this).parent().text());
    });
    $(".dropdown-search-btn").text(selection.join(", "));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-group">
  <button type="button" class="dropdown-search-btn" data-toggle="dropdown"></button>
  <ul class="dropdown-menu">
    <li>
      <a href="#" class="small" data-value="Option 1" tabIndex="-1">
        <input type="checkbox" name="makeup" /><span></span>Option 1</a>
    </li>
    <li>
      <a href="#" class="small" data-value="Option 2" tabIndex="-1">
        <input type="checkbox" name="makeup" /><span></span>Option 2</a>
    </li>
    <li>
      <a href="#" class="small" data-value="Option 3" tabIndex="-1">
        <input type="checkbox" name="makeup" /><span></span>Option 3</a>
    </li>
    <li>
      <a href="#" class="small" data-value="Option 4" tabIndex="-1">
        <input type="checkbox" name="makeup" /><span></span>Option 4</a>
    </li>
    <li>
      <a href="#" class="small" data-value="Option 5" tabIndex="-1">
        <input type="checkbox" name="makeup" /><span></span>Option 5</a>
    </li>
  </ul>
</div>