Как сделать так чтобы класс не пропадал при выборе select?

Нужно чтобы при выборе select, чтобы класс не пропадал, если что-то было выбрано. Допустим я выбрал в select один пункт, потом в select выбрал другой пункт, только выходит, когда второй раз выбираю, класс пропадает
Вот моя реализация
js
$('#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));
        }
    })

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

css
.select-room{
    display: none;
  }
  .selected-room_disabled{
    display: block;
  }
  • Вопрос задан
  • 91 просмотр
Решения вопроса 1
@rusline18 Автор вопроса
$('#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));
        }
    })
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы