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);
}
id | name | parent_id |
1 | テスト1 | 1 |
2 | テスト2 | 1 |
3 | テスト3 | 2 |
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');
});
});
コメント