Select2 为 MVC 中的多选设置值答案

【问题标题】：Select2 Set Values for Multi-Select in MVCSelect2 为 MVC 中的多选设置值
【发布时间】：2016-05-14 15:33:08
【问题描述】：

我正在开发一个在部分表单上使用 select2 多选的项目。这段代码非常适合创建页面，但是当我转到编辑页面时，我遇到了问题。我希望能够从创建“项目”中获取值，然后使用 jQuery 在“编辑”页面上为这些“项目”设置值。

这是我所拥有的：

var re = /[0-9]+$/;
$('#Item').select2({
    theme: "bootstrap",
    placeholder: "Not Set",
    tags: true
});

$('#Item').on("select2:select", function (evt) {
    var element = evt.params.data.element;
    var $element = $(element);
    $element.detach();
    $(this).append($element);
    $(this).trigger("change");
});

var values = "@Model.ItemIds"; //pull ItemIds from Model in MVC
$.each(values.split(","), function (i, e) {
    if (e != "Not Set" && e != "" && e != null && e != undefined) {
        if (!re.test(e)) {
            var newList = $.merge($('#Item').select2('data'), [{
                id: e,
                tag: e
            }]);
            $("#Item").select2('data', newList);
            $("#Item").append('<option value="' + e + '">' + e + '</option>');
        }
    $("#Item option[value=" + e + "]").prop("selected", true);
    }
});

所以，发生的情况是，当页面加载时，我得到的项目是 @Model.ItemIds 中的项目，但它们的顺序是它们在 <select> 下列出的顺序，而不是它们所在的顺序@Model.ItemIds. 任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： javascript c# jquery asp.net-mvc-5 jquery-select2-4

【解决方案1】：

这是我的新代码：

var values = "@Model.ItemIds"; //pull ItemIds from Model in MVC
$.each(values.split(","), function (i, e) {
    if (e != "Not Set" && e != "" && e != null && e != undefined) {
        if (!re.test(e)) {
            var newList = $.merge($('#Item').select2('data'), [{
                id: e,
                tag: e
            }]);
            $("#Item").select2('data', newList);
            $("#Item").append('<option value="' + e + '">' + e + '</option>');
        }
        else{
            $("#Item").append($("#Item option[value='" + e + "']"));
        }
    $("#Item option[value='" + e + "']").prop("selected", true);
    }
});

将现有选项附加到末尾似乎解决了我的问题。

【讨论】：