Select2为MVC中的多选择设置值

Question

我正在使用部分表单上的select2多选项目。此代码适用于创建页面，但当我进入编辑页面时，我遇到了一个问题。我希望能够从创建“Items”的过程中获取我的值，然后使用jQuery在Edit页面上设置这些“Items”的值。

这是我有：

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.任何帮助，将不胜感激。谢谢！

Answer 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); 
    } 
}); 

追加现有的选项，最终似乎已经解决了我的问题。