jQuery select2 的选择值未正确更新
[英]Select value of jQuery select2 not updating correctly
问题描述
我一直在与这个问题争论一个多星期，几乎没有进展。
我看过
- 如何设置jquery select2的选定值？
- Select2 在嵌入引导模式时不起作用
- 使用 JSON 结果填充下拉列表 - 使用 MVC3、JQuery、Ajax、JSON 级联 DropDown
- 重置 select2 值并显示占位符
- https://github.com/select2/select2/issues/3057
- https://github.com/select2/select2/issues/1436 。
最后，在查看https://select2.org/troubleshooting/common-problems 之后
我尝试同时应用dropdownParent: $('#myModal')和
// Do this before you initialize any of your modals
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
这些修复都没有奏效，所以我真的不知所措，准备完全放弃使用模态。 基本上，我从 JSON 对象中的服务器获取我的数据，然后使用该数据填充模态。 除了第一个组合框外，填充对所有元素（其中几个是选择/组合框）都正常工作。
预先感谢您的帮助，如果答案张贴在其他地方，我很抱歉，但我找不到。 以下是相关代码：
<!-- Modal to Add / Edit Delay parent div must have same id as value of the data-target attribute used to trigger the modal -->
<div class="modal fade" id="delayAddModal" tabindex="-1" role="dialog" aria-labelledby="delayAddLabel">
<div class="modal-dialog" role="document">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<!-- This "x" button is for dismissing the modal -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="delayAddLabel">Add Delay</h4>
</div>
<div class="modal-body">
<p id="testActualJobTaskIdFunction"></p>
@Html.Partial("_ActualTrainDelayAddEdit", Model.TrainDelay)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- call to js function-->
<button id="delayAddButton" type="button" class="btn btn-primary" data-title="Add Delay">Add Delay</button>
</div>
</div>
</div>
</div>
嵌套在上面定义的模态中的部分视图（这已被修剪，以便正确更新的元素丢失）。 subdivisionId 没有正确更新，但是，locationId 是（都是组合框）：
@model ActualTrainDelayAddEditModel
<form name="delay-form" id="delay-form">
@Html.HiddenFor(m => m.ActualTrainDelayId, new { id = "ActualTrainDelayId" })
@Html.HiddenFor(m => m.ActualJobTaskId)
@*Original:*@
<div class="form-group">
<!-- Renders floating text ("Subdivision") above the select options -->
@Html.LabelFor(m => m.SubdivisionId, new { @class = "field-label always-visible" })
<!-- ID for select element -->
<!-- Renders select class="select" id="SubdivisionId" name="SubdivisionId"><option value="4429faa8-5ad4-4adf-adde-ec7cf88ed9e9" innerHTML "Caltrain"-->
@Html.DropDownListFor(m => m.SubdivisionId, Model.AvailableSubdivisions, new { @class = "select" })
@Html.ValidationMessageFor(m => m.SubdivisionId)
</div>
<!-- Location -->
<div class="form-group">
@Html.LabelFor(m => m.LocationId, new { @class = "field-label always-visible" })
<select id="LocationId" name="LocationId" class="select">
@foreach (var loc in Model.AvailableLocations)
{
<option value="@loc.Id" data-milepost="@loc.Milepost">@loc.Name</option>
}
</select>
@Html.ValidationMessageFor(m => m.LocationId)
</div>
</div>
使用数据更新模态的 jQuery 函数：
<script>
// Do this before you initialize any of your modals
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
$("#delayAddModal")
.on("show.bs.modal",
function(event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var modal = $(this);
var title = button.data('title'); // get New title from data-title attribute
var delId = button.data("guid");
var name = button.data("name");
var conditionalVariable = 1;
var updateButtonValue = "Save Edit";
//alert(title);
//$("#SubdivisionId").append("<option value='0'>--Select State--</option>");
//If add delay is clicked there will be no guid
if (delId == null) {
modal.find('.modal-title').text(title); // set title to Add Delay
modal.find('#delayAddButton').text("Add Delay"); // set button value to Add Delay
return;
}
modal.find('.modal-title').text(title); // set title to New title
modal.find('#delayAddButton').text(updateButtonValue); // set button value to Edit Delay
// var button = $(event.relatedTarget);
// var delId = button.data("guid");
// var name = button.data("name");
//var modal = $(this);
$.ajax({
type: "GET",
url: "@Url.Action("GetDelayDataForEditing")/" + "?delayId=" + delId,
dataType: 'json',
//data: delId,
success: function(data) {
modal.find('');
//$("#SubdivisionId").change(function () {
var sub = data.SubdivisionId;
//console.log("This is the subId: "+sub);
//changing the subdivision changes the locations available in the location box
$.getJSON('@Url.Action("LocationBySubdivisionList", "TrainActivity")?id=' + sub,
function(locs) {
// the stuff that needs to happen before the parent ajax completes needs to go in here
$('#IncidentNumber').val(data.IncidentNumber);
// alert("In the getJson function");
//$("select#SubdivisionId").empty();
$('select#SubdivisionId').val(data.SubdivisionId);
//$('#SubdivisionId').select2('data', data.SubdivisionId);
//$('select#SubdivisionId').select2('data', data.SubdivisionId);
//$('#SubdivisionId').select2('data', { id: 100, a_key: 'Lorem Ipsum' });
$("#SubdivisionId > [value=" + data.SubdivisionId + "]")
.insertBefore("#SubdivisionId > :first-child");
//$("#SubdivisionId").append(data.SubdivisionId);
$('#StartMilepost').val(data.StartMilepost);
$('#EndMilepost').val(data.EndMilepost);
var list = $('#LocationId');
list.find('option').remove();
$(locs).each(function(index, loc) {
list.append('<option value="' +
loc.Id +
'" data-milepost="' +
loc.Milepost +
'">' +
loc.Name +
'</option>');
});
$('select#LocationId').val(data.LocationId);
$("#LocationId > [value=" + data.LocationId + "]")
.insertBefore("#LocationId > :first-child");
//$("#LocationId").append(data.LocationId);
//nearestMilepost();
$('select#DelayTypeId').val(data.DelayTypeId);
$("#DelayTypeId > [value=" + data.DelayTypeId + "]")
.insertBefore("#DelayTypeId > :first-child");
//$("#DelayTypeId").append(data.DelayTypeId);
$('select#ThirdPartyResponsibleId').val(data.ThirdPartyResponsibleId);
$("#ThirdPartyResponsibleId > [value=" + data.ThirdPartyResponsibleId + "]")
.insertBefore("#ThirdPartyResponsibleId > :first-child");
$('#BeginDelayDateTime').val(parseHoursAndMinutes(data.BeginDelayDateTime));
$('#EndDelayDateTime').val(parseHoursAndMinutes(data.EndDelayDateTime));
$('#ResultingDelay').val(data.ResultingDelay);
$('#TimeInDelay').val(data.TimeInDelay);
if (data.IsServiceFailure) {
$('#IsServiceFailure').iCheck('check');
} else {
$('#IsServiceFailure').iCheck('uncheck');
}
if (data.IsResolved) {
$('#IsResolved').iCheck('check');
} else {
$('#IsResolved').iCheck('uncheck');
}
if (data.IsRootCauseDelay) {
$('#IsRootCauseDelay').iCheck('check');
} else {
$('#IsRootCauseDelay').iCheck('uncheck');
}
$('#Comment').val(data.Comment);
$('#SavedVisible').iCheck('uncheck');
$('#SaveNewComment').iCheck('uncheck');
$('#ActualTrainDelayId').val(data.ActualTrainDelayId);
//delayExists = true;
//$('button#delayAddButton').attr("id", delId);
});
alert("Success " +
"\nunparsed data: " +
data +
"\nStringified data: " +
JSON.stringify(data) +
//"\nNew JS date: " + newJavaScriptDate +
//"\nDate date: " + parsedBeginDateTime +
//"\nFormatted date: " + hoursAndMinutes +
//"\nDisplay time: " + timeToDisplay +
//"\nAJT id: " + data.ActualJobTaskId +
//"\nIncident Number: " + data.IncidentNumber +
"\nLocation ID: " +
data.LocationId +
"\nStart MP: " +
data.StartMilepost +
"\nEnd MP: " +
data.EndMilepost +
"\nDelay Type Id: " +
data.DelayTypeId +
"\nThird Party Resp: " +
data.ThirdPartyResponsibleId +
"\nSubdivision Id: " +
data.SubdivisionId +
"\nbegin Delay time: " +
data.BeginDelayDateTime +
"\nend Delay time: " +
data.EndDelayDateTime +
"\nresulting delay: " +
data.ResultingDelay +
"\ntime in delay: " +
data.TimeInDelay +
"\nis root cause: " +
data.IsRootCauseDelay +
"\nis resolved: " +
data.IsResolved +
"\nis service failure: " +
data.IsServiceFailure +
"\ncomment: " +
data.Comment
);
//$('#delays-grid').data('kendoGrid').dataSource.read();
//$("#delayAddModal").modal("hide");
},
error: function() { alert("error in Delay Edit"); }
});
//modal.find(".modal-body").text("Edit the Delay at " + name + " with id " + delId);
//modal.find(".modal-footer #delayEditButton").data("guid", delId);
});
</script>
2 个解决方案
解决方案1
3 2018-08-07 14:44:11
好的，我想我想出了一个在这里找到的修复程序：https ://select2.org/programmatic-control/add-select-clear-items
我编辑了我的声明：
$('select#SubdivisionId').val(data.SubdivisionId);
到：
$('select#SubdivisionId').val(data.SubdivisionId).trigger('change');
任何不便敬请谅解。 希望这会有所帮助。 干杯。
解决方案2
0 2020-04-10 21:50:49
是要对编辑值应用更改，您应该使用： .trigger('change'); 在设置值的最后这节省了我的一天
Select2 未正确渲染
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.