[Laravel]Ajax-非同期で動的にセレクトボックスの項目作成

スポンサーリンク
laravelLaravel

bladeファイルセレクトボックス部分

<select id=parent name="parent_id">
    <option value="">選択してください<option>
    <option value="1">項目1<option>
    <option value="2">項目2<option>
    <option value="3">項目3<option>
</select>

<select id=child name="child_id" disabled>
    <option value="">選択してください<option>
</select>

ルーティング作成

Route::get('/ajax/user', [UserController::class, 'getUsers']);

動的データ取得処理作成

public function getUsers(Request $request)
{
    $parent_id = $request->parent_id;

    $users = User::select('id', 'name')->where('parent_id', $parent_id)->get();

    return response()->json($users);
}
idnameparent_id
1テスト11
2テスト21
3テスト32
ユーザーテーブルのカラム例

Jsファイル作成

/**
 * 子のセレクトボックスのオプションを動的に切り替える処理
 * 親のselect要素が変更されたときにイベント発火
 */
$('#parent_id').change(function () {
    var parent_val = $('#parent_id').val();

    // 未選択状態を選択した場合
    if (!parent_val) {
        // 子のオプションを一旦削除
        $('#child_id option').remove();
        // 子のセレクトボックスを非活性
        $('#child_id').prop('disabled', true);
        // 子のセレクトボックスのオプションを生成
        $('#child_id').append($('<option>').text('選択してください').attr('value', ''));

        return;
    }

    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: '/ajax/user',
        type: 'GET',
        data: { 'parent_id': parent_val },
        datatype: 'json',
    })
        .done(function (datas) {
            // 子のオプションを一旦削除
            $('#child_id option').remove();
            // 子のセレクトボックスを活性化
            $('#child_id').prop('disabled', false);
            // DBから受け取ったデータからoptionを生成
            $('#child_id').append($('<option>').text('選択してください').attr('value', ''));
            $.each(datas, function (key, value) {
                $('#child_id').append($('<option>').text(value['name']).attr('value', value['id']));
            });
        })
        .fail(function () {
            console.log('fail');
        });

});

コメント

タイトルとURLをコピーしました