当我再次选择相同选项时，如何触发事件？

Question

当我点击我的选择框的选项时，即使选项已被选中，我也试图获得一个事件。原因是，我想将值添加到我的列表中，可以多次添加它们。

现在我可以添加dog，然后添加cat，然后添加dog。所以在我的清单中我有

狗

猫

狗

但是cat之后不能立即添加cat，所以我的列表如下所示：

猫

猫

猫

＆＃13;

＆＃13;

$(function () {
  //Initialize Select2 Elements
  $(".select2").select2();
});

$(document).ready(function () {
  $(".select2").on("change", function () {
    var classname = $(".select2 option:selected").val();
  $(".result").append("<li>" + classname + "</li>");
  });
});

＆＃13;

<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

<div class="form-group">
  <select class=" form-control select2" style="width: 100%;">
    <option>Cat</option>
    <option>Dog</option>
    <option>Bird</option>
  </select>
</div>



<div class="result"></div>

＆＃13;

＆＃13;

＆＃13;

编辑： 我找到了一个适合我的解决方案：

＆＃13;

＆＃13;

$(function () {
  //Initialize Select2 Elements
  $(".select2").select2();
});

$(document).ready(function () {
  $(".select2").on("change", function () {
    var classname = $(".select2 option:selected").val();
  $(".result").append("<li>" + classname + "</li>");
  var should_be_selected = 'empty';
     $(".select2 option:selected").removeAttr("selected");
    $('.select2').find('.' + should_be_selected).attr('selected', 'selected');
   
  });
});

＆＃13;

<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

<div class="form-group">
  <select class=" form-control select2" style="width: 100%;">
    <option class="empty"></option>
    <option>Cat</option>
    <option>Dog</option>
    <option>Bird</option>
  </select>
</div>




<div class="result"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

change事件仅在所选选项更改时触发 - 顾名思义。如果您希望在选择相同选项时触发此行为，则没有可靠的解决方法。

另一种方法是在DOM中放置<button>，然后在单击按钮时仅插入新的li，如下所示：

$(function() {
  $(".select2").select2();

  $(".add").on("click", function() {
    var classname = $(".select2").val();
    $(".result").append("<li>" + classname + "</li>");
  });
});

.remove {
  cursor: pointer
}

<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

<div class="form-group">
  <select class=" form-control select2" style="width: 100%;">
    <option>Cat</option>
    <option>Dog</option>
    <option>Bird</option>
  </select>
  <button class="add">Add</button>
</div>
<div class="result"></div>

Answer 2

添加 select2:close 事件对我有用：

$('.select2').on('select2:select select2:close', function (e) {
// Do what you need here
});