"Selesaikan masalah yang select2 tidak boleh memilih data"

Question

Bila edit data, saya ada masalah sikit dengan select2, select2 tak pilih nilai Ini ialah data jadual paparan data saya

Apabila saya mengklik butang "Edit Data" ia harus memilih "Tetapan" pada nilai induk tetapi ia tidak berfungsi, lihat ini

Skrip modal

<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 -->

Ini skrip ajax saya

Skrip Ajax

// 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
        }
    });
});

Mendapatkan data apabila butang edit diklik Saya biasanya menggunakan pencetus untuk menetapkan nilai pilih pilih2 tetapi ia tidak berfungsi

Dapatkan data

$('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');
        }
    });
});

Ini pengawal saya

Pengawal

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);
}

Data dipaparkan tetapi tidak dipilih, sepatutnya seperti ini

Saya tidak tahu sama ada cara saya menulis kod itu betul, saya baru dalam pengekodan jadi tolong bantu saya :)

Answer 1

Jadi saya menemui penyelesaian dengan kod yang saya buat. Saya telah menambah beberapa kod dalam pengawal dan skrip JavaScript saya. Inilah kod yang saya tambah:

Dalam pengawal, untuk mendapatkan data saya menambah kod berikut:

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

Ini adalah bahagian kod yang lengkap Klik di sini untuk melihat

Bagi JavaScript, saya membuat beberapa perubahan pada nilai pulangan select2 seperti berikut:

/// 根据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');

Ini adalah bahagian kod yang lengkap Klik di sini untuk melihat