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

jsfiddle for Select2 v4

jsfiddle for Select2 v3.5.3

添加新值并选择清除以前的选择 - 选择2倍

1 个答案: