Select2 不更新条目
Select2 not updating entry
我有一个使用 C#、jQuery 和 Select2 v3.5.2 以及 Bootstrap 2.3.2.
的 MVC5 应用程序
现在我是 select2 的新手,所以遇到了一些麻烦。例如,我想要一个包含多个项目的文本框,如标签支持示例所示。
现在,这应该不难,但问题是我需要在 Bootstrap 模态中动态更新这些值,在 Ajax 之后使用 jQuery调用服务器。
听起来很复杂,其实很简单。当用户点击一个按钮来编辑一个项目时,在向服务器查询该项目的信息后,我会显示一个 Bootsrap 模式,其中包含该项目的信息:
//Show Edit Package modal
$("a.btn.btn-default.editPackage").click(function () {
//ask the server for item information
$.ajax({
url: $(this).data('url'),
type: 'get',
cache: false,
success: function (result) {
//this input field belongs to the modal
$(input #SubCategoryId).attr('data-edit-values', '13 - Orange');
$('#myModal').show();
}
});
return false; //prevent browser defualt behavior
});
这是模态(主要是样板代码):
<div class="modal fade" id="@Model.modalId" tabindex="-1" role="dialog" aria-labelledby="@Model.modalId" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: auto; max-height: 80vh;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">@Model.modalTitle</h4>
</div>
<div class="modal-body" data-val="@Model.packageId">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Select the Function:</label>
<div class="controls">
<input class="select2s" data-edit-values="@Model.functionsString" data-o2f-placeholder="Select Employee Function..." data-o2f-url="@Url.Action("FunctionsMultiple", "Home")" data-val="false" id="SubCategoryId" name="SubCategoryId" multiple="multiple" type="text"/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="@Model.saveButtonId" data-url="@Model.saveButtonUrl">@Model.saveButtonText</button>
</div>
</div>
</div>
</div>
问题是当我加载弹出窗口时,字段上的值没有加载。
我的 javaScript 做错了什么?
要在任何模式中更新 select2 字段的值,我意识到我必须使用 select2 中的特殊函数来实现效果:$('#fieldId').select2('data', "blablablaMyData");
我有一个使用 C#、jQuery 和 Select2 v3.5.2 以及 Bootstrap 2.3.2.
的 MVC5 应用程序现在我是 select2 的新手,所以遇到了一些麻烦。例如,我想要一个包含多个项目的文本框,如标签支持示例所示。
现在,这应该不难,但问题是我需要在 Bootstrap 模态中动态更新这些值,在 Ajax 之后使用 jQuery调用服务器。
听起来很复杂,其实很简单。当用户点击一个按钮来编辑一个项目时,在向服务器查询该项目的信息后,我会显示一个 Bootsrap 模式,其中包含该项目的信息:
//Show Edit Package modal
$("a.btn.btn-default.editPackage").click(function () {
//ask the server for item information
$.ajax({
url: $(this).data('url'),
type: 'get',
cache: false,
success: function (result) {
//this input field belongs to the modal
$(input #SubCategoryId).attr('data-edit-values', '13 - Orange');
$('#myModal').show();
}
});
return false; //prevent browser defualt behavior
});
这是模态(主要是样板代码):
<div class="modal fade" id="@Model.modalId" tabindex="-1" role="dialog" aria-labelledby="@Model.modalId" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: auto; max-height: 80vh;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">@Model.modalTitle</h4>
</div>
<div class="modal-body" data-val="@Model.packageId">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Select the Function:</label>
<div class="controls">
<input class="select2s" data-edit-values="@Model.functionsString" data-o2f-placeholder="Select Employee Function..." data-o2f-url="@Url.Action("FunctionsMultiple", "Home")" data-val="false" id="SubCategoryId" name="SubCategoryId" multiple="multiple" type="text"/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="@Model.saveButtonId" data-url="@Model.saveButtonUrl">@Model.saveButtonText</button>
</div>
</div>
</div>
</div>
问题是当我加载弹出窗口时,字段上的值没有加载。
我的 javaScript 做错了什么?
要在任何模式中更新 select2 字段的值,我意识到我必须使用 select2 中的特殊函数来实现效果:$('#fieldId').select2('data', "blablablaMyData");