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

I have this script that runs when a user selects an element in a dropdown list:

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

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

I'm using the Twitter Bootstrap noclose, so dropdown-menu stays open until I click out of it. This is designed to allow a user to select multiple options. So as I select various options, my console looks like this, as the script fires on each click:

我正在使用Twitter Bootstrap noclose,所以下拉菜单保持打开状态,直到我点击它为止。这旨在允许用户选择多个选项。因此,当我选择各种选项时,我的控制台看起来像这样,因为脚本会在每次点击时触发:

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

se等于se等于A se等于A,B se等于A,B,C

This is great - and it's functioning properly, but in the same dropdown, if I deselect C after I have selected it, it doesn't REMOVE c as a value from the array seSelection.

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

I'm not sure how to write the code that does the inverse of what my script's code above does since I can't find any unclick(function) or unpush(this.value) that exists in jQuery.

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

How do I write this?

我怎么写这个?

2 个解决方案

#1

On unchecking you can remove the item from the array just like this http://jsfiddle.net/93zL0ae9/

在取消选中时,您可以从数组中删除项目,就像这样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>

#2

It's because the instance is still being saved in your global variable, seSelection. I bet you if you unselect and then re-select an option it would show up twice.

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

It depends what your requirements are, but you probably instead want to generate that array of results from scratch after each click. You can do this by moving your var seSelection = []; line within the anonymous callback function, as well as that console.log statement.

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

#1