„Lösen Sie das Problem, dass select2 keine Daten auswählen kann'

Question

Beim Bearbeiten von Daten habe ich ein kleines Problem mit select2, select2 wählt den Wert nicht aus Dies sind die Daten meiner Datenanzeigetabelle

Wenn ich auf die Schaltfläche „Daten bearbeiten“ klicke, sollte für den übergeordneten Wert „Einstellungen“ ausgewählt werden, aber es funktioniert nicht, siehe hier

Modales Skript

<div class="modal fade" id="modal-edit" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title mt-0">Edit Data Navigation</h5>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div>
        <div class="modal-body">
            <input type="hidden" id="token" value="{{ csrf_token() }}">
            <input type="hidden" id="nav_id">
            <div class="form-group">
                <label>Nama Menu</label>
                <input type="text" name="name" class="form-control name" id="name"
                    placeholder="Type something" />
                <div class="alert alert-danger mt-2 d-none" role="alert" id="alert-name"></div>
            </div>
            <div class="form-group">
                <label>URL</label>
                <input type="text" name="url" class="form-control url" id="url"
                    placeholder="Type something" />
                <div class="alert alert-danger mt-2 d-none" role="alert" id="alert-url"></div>
            </div>
            <div class="form-group">
                <label>Icon</label>
                <input type="text" name="icon" class="form-control icon" id="icon"
                    placeholder="Type something" />
                <div class="alert alert-danger mt-2 d-none" role="alert" id="alert-icon"></div>
            </div>
            <div class="form-group">
                <label>Parent</label>
                <select id="parent_id" class="form-control parent_id">
                    <option value=""></option>
                </select>
                <div class="alert alert-danger mt-2 d-none" role="alert" id="alert-parent"></div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">TUTUP</button>
            <button type="button" class="btn btn-primary" id="update">SIMPAN</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

Das ist mein Ajax-Skript

Ajax-Skript

// select2 data parents
$(document).ready(function() {
    var _token = $('meta[name="csrf-token"]').attr('content');
    var parentSelect = $('.parent_id');
    $(".parent_id").select2({
        dropdownParent: $('#modal-edit'),
        placeholder: 'Choose Parent',
        ajax: {
            url: "{{ route('getNavigations') }}",
            type: "get",
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    token: _token,
                    search: params.term // search term
                };
            },
            processResults: function(response) {
                return {
                    results: response
                };
            },
            cache: true
        }
    });
});

Daten abrufen, wenn auf die Schaltfläche „Bearbeiten“ geklickt wird. Normalerweise verwende ich Trigger, um den ausgewählten Wert von „select2“ festzulegen, aber es funktioniert nicht

Daten abrufen

$('body').on('click', '#btn-edit-post', function() {
    var nav_id = $(this).data('id');
    //fetch detail post with ajax
    $.ajax({
        url: `navigations/${nav_id}`,
        type: "GET",
        cache: false,
        success: function(response) {
            // console.log(response);
            //fill data to form
            $('#nav_id').val(response.data.id);
            $('.name').val(response.data.name);
            $('.url').val(response.data.url);
            $('.icon').val(response.data.icon);
            $('.parent_id').val(response.data.parent_id).trigger('change');
            //open modal
            $('#modal-edit').modal('show');
        }
    });
});

Das ist mein Controller

Controller

public function getNavigations(Request $request)
{
    $search = $request->search;
    if ($search == '') {
        $navigation = Navigation::orderby('name', 'asc')->select('id', 'name', 'parent_id')->where('parent_id')->limit(5)->get();
    } else {
        $navigation = Navigation::orderby('name', 'asc')->select('id', 'name', 'parent_id')->where('name', 'like', '%' . $search . '%')->limit(5)->get();
    }
    // create respons
    $response = array();
    foreach ($navigation as $parent) {
        $response[] = array(
            "id"        => $parent->id,
            "text"      => $parent->name,
        );
    }
    // dd($response);
    return response()->json($response);
}

Die Daten werden angezeigt, aber nicht ausgewählt, es sollte so sein

Ich weiß nicht, ob die Art und Weise, wie ich den Code schreibe, korrekt ist. Ich bin neu im Codieren, also helfen Sie mir bitte :)

Answer 1

所以我找到了我创建的代码的解决方案。我在控制器和我的JavaScript脚本中添加了一些代码。以下是我添加的代码：

在控制器中，为了获取数据，我添加了以下代码：

// 获取所有父导航项（不包括当前导航项）
    $parentItems = Navigation::where('id', '!=', $id)->get(['id', 'name']);

这是代码的完成部分 点击这里查看

至于JavaScript，我对select2的返回值进行了一些更改，如下所示：

/// 根据parent_id获取父项的名称
            var parentName = '';
            var parentItem = response.parent_items.find(function(item) {
                return item.id === response.data.parent_id;
            });
            if (parentItem) {
                parentName = parentItem.name;
            }
            var newOption = new Option(parentName, response.data.parent_id, true, true);
            $(".parent_id").append(newOption).trigger('change');

这是代码的完成部分 点击这里查看