Javascript 在MVC中为多选选择2个设置值
我正在做一个项目,在部分表单上使用select2 multi-selects。这段代码对于创建页面非常有效,但是当我转到编辑页面时,我遇到了一个问题。我希望能够从创建项目中获取值,然后使用jQuery在编辑页面上为这些项目设置值 以下是我所拥有的:Javascript 在MVC中为多选选择2个设置值,javascript,c#,jquery,asp.net-mvc-5,jquery-select2-4,Javascript,C#,Jquery,Asp.net Mvc 5,Jquery Select2 4,我正在做一个项目,在部分表单上使用select2 multi-selects。这段代码对于创建页面非常有效,但是当我转到编辑页面时,我遇到了一个问题。我希望能够从创建项目中获取值,然后使用jQuery在编辑页面上为这些项目设置值 以下是我所拥有的: var re = /[0-9]+$/; $('#Item').select2({ theme: "bootstrap", placeholder: "Not Set", tags: true }); $('#Item').o
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中所选的项目,但它们是按照在下列出的顺序排列的,而不是@Model.ItemIds中的顺序排列的。任何帮助都将不胜感激。谢谢 这是我的新代码:
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);
}
});
将现有选项添加到末尾似乎解决了我的问题。以下是我的新代码:
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);
}
});
将现有选项附加到末尾似乎解决了我的问题