Question

我有一个功能，当我更改我的多选项时，输出是＆＃34;添加选项＆＃34;。问题是，当我删除选项时，我不想要任何输出，我不知道如何实现这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

用select2选择替换更改事件

版本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");
});

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

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

2 个答案: