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

这似乎有效，它在控制台中显示正确的值。但是，按钮文本没有正确更改。例如，如果数组的值为＆＃34;选项1，选项2，选项3和＃34;它会将按钮文本更改为＆＃34; on，on，on＆＃34;而不是数组中的内容。经过几个小时的搜索和搞乱，我没有想法，我无法弄清楚为什么它没有输出正确的值。

非常感谢任何帮助。

Answer 1

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

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

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

jQuery - 数组未显示正确的值

1 个答案: