如何仅在添加选项时触发，而不是在删除时触发（多选 2）？答案

【问题标题】：How can I fire only on adding an option, not on remove (multiple select2)?如何仅在添加选项时触发，而不是在删除时触发（多选 2）？
【发布时间】：2018-02-05 09:18:57
【问题描述】：

我有一个功能，当我更改多项选择的选项时，输出是“添加选项”。问题是，当我删除该选项时，我不想要任何输出并且我不知道如何实现：

$(document).ready(
    function () {
        $("#multipleSelectExample").select2();
    }
);


 $("#multipleSelectExample").on("change", function () {
    console.log("add option");
       });

.selectRow {
    display : block;
    padding : 20px;
}
.select2-container {
    width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://select2.github.io/select2/select2-3.5.1/select2.js"></script>
<link href="http://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>


<body>
    <div class="selectRow">
        <!-- Using data-placeholder below to set place holder value versus putting in configuration -->
        <select id="multipleSelectExample" data-placeholder="Select an option" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>
</body>

【问题讨论】：

标签： jquery select jquery-select2

【解决方案1】：

用 select2-selecting 替换更改事件

版本 4.0 +

$('#multipleSelectExample').on("select2:selecting", function(e) { 
  console.log("add option");
});

4.0 之前的版本

$('#multipleSelectExample').on("select2-selecting", function(e) { 
   console.log("add option");
});

你的版本

$("#multipleSelectExample").on("select2-selecting", function () {
    console.log("add option");
});

【讨论】：

【解决方案2】：

现在您将以数组格式获得所选选项的准确值。我希望这足以让您进一步处理。我为你添加了一些肮脏的逻辑，但这是唯一可用的选项。

$(document).ready(
    function () {
        $("#multipleSelectExample").select2();
    }
);

selectedselect2 = []
 $("#multipleSelectExample").on("change", function (event) {
    //console.log(event);
    //console.log(event["val"]);
    //console.log($(this).val());
    //console.log(selectedselect2.length)
    
    if ($(this).val() && selectedselect2.length == 0)
    {
      selectedselect2 = $(this).val()
      console.log("added"); 
    }
    else if ($(this).val() && selectedselect2.length < $(this).val().length)
    {
      selectedselect2 = $(this).val()
      console.log("added"); 
    }
    else if ($(this).val() && selectedselect2.length > $(this).val().length)
    {
      selectedselect2 = $(this).val()
      console.log("removed"); 
    }
    else{
    selectedselect2 = []
    console.log("removed"); 
    }
    
 });

.selectRow {
    display : block;
    padding : 20px;
}
.select2-container {
    width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://select2.github.io/select2/select2-3.5.1/select2.js"></script>
<link href="http://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>


<body>
    <div class="selectRow">
        <!-- Using data-placeholder below to set place holder value versus putting in configuration -->
        <select id="multipleSelectExample" data-placeholder="Select an option" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>
</body>

【讨论】：