$('#select-branch').change(function () {
let value = $(this).val();
console.log(value);
if ($(this).val() !== null){
$.ajax({
type: 'get',
url: `${window.location.origin}/branch/rooms/${value}`
})
.done(res => {
console.log(res);
let room = res.map(room => {
return `<option value="${room.id}">${room.name}</option>`
});
$('.select-room').toggleClass('selected-room_disabled').html(`<option value="" disabled selected>Выберите комнату</option>${room}`);
})
.fail(err => console.error(err.responseJSON.message));
}
})
<div class="form-group">
<select name="branch" class="form-control" id="select-branch" required>
<option value="" disabled selected>Выберите Филиал</option>
@foreach($arr as $key => $branch)
<option value="{{ $branch['id'] }}">{{ $branch['name'] }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<select name="room" class="form-control select-room">
</select>
</div>
.select-room{
display: none;
}
.selected-room_disabled{
display: block;
}
$('#select-branch').change(function () {
let value = $(this).val();
console.log(value);
if ($(this).val() !== null){
$.ajax({
type: 'get',
url: `${window.location.origin}/branch/rooms/${value}`,
beforeSend: function () {
$('.select-room').css('display', 'block').html(`<option value="" disabled selected>Загрузка</option>`)
}
})
.done(res => {
console.log(res);
let room = res.map(room => {
return `<option value="${room.id}">${room.name}</option>`
});
$('.select-room').css('display', 'block').html(`<option value="" disabled selected>Выберите комнату</option>${room}`);
})
.fail(err => console.error(err.responseJSON.message));
}
})