Question

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

<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 Bootstrap noclose，所以dropdown-menu保持打开状态，直到我点击它为止。这旨在允许用户选择多个选项。因此，当我选择各种选项时，我的控制台看起来像这样，因为脚本会在每次点击时触发：

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

这很棒 - 并且它运行正常，但在相同的下拉菜单中，如果我在选择C后取消选择C，它就不会将c作为数组中的值删除seSelection。

我不确定如何编写与我的脚本代码相反的代码，因为我无法找到任何unclick(function)或unpush(this.value)存在于jQuery中。

我该怎么写？

Answer 1

取消选中后，您可以像使用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>

Answer 2

因为实例仍然保存在全局变量seSelection中。我打赌你，如果你取消选择，然后重新选择它会出现两次的选项。

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

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

2 个答案: