添加新值並選擇會清除以前的選擇-Select2的倍數

Question

經過一番有趣的游戲之后，我終於找到了如何動態地（按一下按鈕）向頁面加載時從MVC模型填充的多個Select2選擇控件中添加和選擇新值的方法...

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

...和...

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

...但是我無法解決如何阻止它清除先前選擇的值。

我嘗試了各種建議的解決方案，其中大多數是基於將值推入select2數據的，但是這些似乎都不起作用，雖然不確定為什么。

請提出想法/建議。

Answer 1

刪除對.val(newTopic)的調用。 那就是清除先前選擇的值。

添加標記為已選擇的選項並觸發更改事件就足以更改該值。

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

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

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

用於Select2 v4的jsfiddle

用於Select2 v3.5.3的jsfiddle