javascript - jQuery select2 的选择值未正确更新

Question

我已经为这个问题争论了一个多星期，但几乎没有任何进展。

我看过

• How to set selected value of jquery select2?
• Select2 doesn't work when embedded in a bootstrap modal
• Populating dropdown with JSON result - Cascading DropDown using MVC3, JQuery, Ajax, JSON
• Reset select2 value and show placeholder
• 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">&times;</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>

嵌套在上面定义的模式中的部分 View (已被 trim ，以便正确更新的元素丢失)。 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>

Answer 1

好吧，我想我找到了一个修复程序:https://select2.org/programmatic-control/add-select-clear-items

我编辑了我的声明:

$('select#SubdivisionId').val(data.SubdivisionId);

至:

$('select#SubdivisionId').val(data.SubdivisionId).trigger('change');

对于给您带来的任何不便，我们深表歉意。希望这有帮助。干杯。