當我再次選擇相同的選項時，我該如何觸發事件？

Question

我試圖在我的選擇框中選中某個選項時獲得一個事件，即使該選項已被選中。原因是，我想將值添加到我的列表中，並有可能多次添加它們。

現在我可以添加dog，然後cat然後dog。所以在我的名單上有

狗

貓

狗

但它不可能cat後立即加入cat，所以我的列表看起來像這樣：

貓

貓

貓

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

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

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

編輯： 我發現我工作的解決方案：

$(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'); 
 
    
 
    }); 
 
});

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

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>