取消选择下拉项时从数组中删除元素

Removing an element from an array when a dropdown item is unselected

本文关键字：数组 删除 元素 选择 取消      更新时间：2023-11-03

我有一个脚本，当用户在下拉列表中选择一个元素时运行：

<script type="text/javascript">
    var seSelection = [];
    $(document).ready(function() {
        $(".dropdown-menu input").click(function() {
            var value = $(this).val();
            $(this).closest("#seButton").data();
            if (this.checked) {
                seSelection.push(this.value);
            }          
        });
        console.log("se equals " + seSelection);
    });
</script>
<button id ="seButton" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
    Options<span class="caret"></span>
</button>
<ul class="dropdown-menu noclose">
    <li>
        <input type="checkbox" id="ex3_1" name="ex3" value="A" checked="">
        <label for="ex3_1">Option 1</label>
    </li>
    <li>
        <input type="checkbox" id="ex3_2" name="ex3" value="B">
        <label for="ex3_2">Option 2</label>
    </li>
    <li>
        <input type="checkbox" id="ex3_3" name="ex3" value="C">
        <label for="ex3_3">Option 3</label>
    </li>
</ul>

我使用的是Twitter引导程序noclose，所以dropdown-menu在我点击退出之前一直处于打开状态。这是为了允许用户选择多个选项。因此，当我选择各种选项时，我的控制台看起来是这样的，因为每次点击脚本都会触发：

se equals
se equals A
se equals A,B
se equals A,B,C

这很好，而且它运行正常，但在同一个下拉列表中，如果我在选择C之后取消选择它，它不会从数组seSelection中删除c作为值。

我不知道如何编写与上面脚本代码相反的代码，因为我在jQuery中找不到任何unclick(function)或unpush(this.value)。

我该怎么写？

取消选中时，您可以像这样从数组中删除项http://jsfiddle.net/93zL0ae9/

<script type="text/javascript">
var seSelection = [];
$(document).ready(function(){
  $(".dropdown-menu input").click(function() {
    var value = $(this).val();
        $(this).closest("#seButton").data();
        if (this.checked) {
           seSelection.push(this.value);
        }
        else
        {
           var index = seSelection.indexOf(this.value);
           if(index>=0)
           {
              seSelection.splice(index,1);
           }
        } 
    console.log("se equals " + seSelection);         
  });
});
</script>

<button id ="seButton" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Options<span class="caret"></span></button>
  <ul class="dropdown-menu noclose">
    <li>
      <input type="checkbox" id="ex3_1" name="ex3" value="A" checked="">
      <label for="ex3_1">Option 1</label>
    </li>
    <li>
      <input type="checkbox" id="ex3_2" name="ex3" value="B">
      <label for="ex3_2">Option 2</label>
    </li>
    <li>
      <input type="checkbox" id="ex3_3" name="ex3" value="C">
      <label for="ex3_3">Option 3</label>
    </li>
  </ul>
</div>

这是因为实例仍保存在全局变量seSelection中。我敢打赌，如果你取消选择，然后重新选择一个选项，它会显示两次。

这取决于您的需求，但您可能希望在每次单击后从头开始生成一系列结果。您可以通过在匿名回调函数中移动var seSelection = [];行以及console.log语句来完成此操作。

相关文章：