同じオプションを再度選択した場合、どのようにイベントを発生させることができますか？

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>

はEDIT： 私は私のために働いた解決策を見つけた：

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