"Résolvez le problème selon lequel select2 ne peut pas sélectionner les données"

Question

Lors de l'édition des données, j'ai un petit problème avec select2, select2 ne sélectionnera pas la valeur Voici mes données de tableau d'affichage de données

Lorsque je clique sur le bouton "Modifier les données", il doit sélectionner "Paramètres" sur la valeur parent mais cela ne fonctionne pas, voyez ceci

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

Voici mon script ajax

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

Obtenir des données lorsque vous cliquez sur le bouton Modifier. J'utilise généralement le déclencheur pour définir la valeur sélectionnée de select2 mais cela ne fonctionne pas

Obtenir des données

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

C'est mon contrôleur

Contrôleur

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

Les données sont affichées mais non sélectionnées, cela devrait être comme ça

Je ne sais pas si la façon dont j'écris le code est correcte, je suis nouveau dans le codage, alors aidez-moi s'il vous plaît :)

Answer 1

J'ai donc trouvé la solution avec le code que j'ai créé. J'ai ajouté du code dans le contrôleur et mon script JavaScript. Voici le code que j'ai ajouté :

Dans le contrôleur, pour récupérer les données j'ai ajouté le code suivant :

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

Voici la partie complétée du code Cliquez ici pour voir

En ce qui concerne le JavaScript, j'ai apporté quelques modifications à la valeur de retour de select2 comme suit :

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

Voici la partie complétée du code Cliquez ici pour voir