新しい値を追加して以前の選択をクリアする - Select2 multiple

Question

いくつかの楽しいゲームの後、私は最終的に（ボタンを押すと）動的にページ上のMVCモデルから値を取り込んだ複数のSelect2選択コントロール負荷...

function addTopic() { 
    var newTopic = $("#NewTopic").val(); 
    var select = document.getElementById("topicMaintMultiSelect"); 

    var opt = new Option(newTopic, newTopic); 
    select.options[select.options.length] = opt; 
    opt.setAttribute("selected", "selected"); 

    $("#topicMaintMultiSelect").val(newTopic).trigger("change"); 

    $("#NewTopic").val(""); 
} 

<select id="topicMaintMultiSelect" multiple="multiple" name="SelectedMaintTopic" tabindex="18" required="required"> 
    @foreach (var topic in Model.SystemTopics.AvailableTopics) 
    { 
     <option value=@topic.Value selected=@topic.Selected>@topic.Text</option> 
    } 
</select> 

...と... ...しかし、私は以前に選択した値をクリアするからそれを停止する方法を考え出すことはできません。

私はさまざまな解決策を試しましたが、その大部分はselect2データに値をプッシュすることに基づいていますが、これらのどれもうまくいかないようです。

ご意見/ご提案ください。

Answer 1

.val(newTopic)への呼び出しを削除します。それは以前に選択された値をクリアするものです。

選択済みとマークされ、変更イベントを発生させるオプションを追加するだけで値を変更できます。

var newTopic = $('#NewTopic').val(); 

var $option = $('<option></option>').val(newTopic).text(newTopic).prop('selected', true); 

$('#topicMaintMultiSelect').append($option).change(); 

jsfiddle for Select2 v4

jsfiddle for Select2 v3.5.3