Блог

Здравствуйте, у меня здесь какая-то ошибка, у меня здесь выпадающий список, после того, как я нажму и выберу данные, и выпадающий список добавит пустые данные в выпадающий список. Это ошибка моего выпадающего списка, всегда добавляемые данные, когда я нажимаю и выбираю другой в одном моем выпадающем списке

Это мой Html :

  <div class="form-group col-md-4">
    <label class="fw-500">Room Name :</label>
      <select id="roomName" class="form-control" onchange="getRoomResv(md, this)">
        <option>Select Rooms...</option>
     </select>
 </div>
 

Это мой javascript :

 function getOptionRoom() {
    $.ajax({
        type: "GET",
        url: "<?php echo base_url(); ?>/api/reservation/getRoom",
        dataType: "json",
        success: function(response) {
            console.log(response)
            response.data.forEach((item, index) => {
                $('#roomName').append($("<option></option>").attr("value", item.id).text(item.name))
            })
        },
        error: function(err) {

            if (err.status == 422) {
                $.each(err.responseJSON.message, function(index, value) {
                    iziToast.error({
                        title: 'Error',
                        message: value,
                    });
                });
            } else if (err.status == 401) {

                iziToast.error({
                    title: 'Error',
                    message: err.responseJSON.message,
                });

                if (err.responseJSON.authError) {

                    localStorage.removeItem('_token');
                    window.location.href = '<?php echo base_url('login'); ?>';
                }
                window.location.href = '<?php echo base_url(); ?>';
            }
        }
    })
}

function getRoomResv(tanggal, drop) {
    console.log(tanggal, $('#roomName').val());
    if ($('#roomName').val() == 'Select Rooms...') {
        return;
    }
    document.querySelector("#valRoom").value = document.querySelector("#roomName").value;
    getData(tanggal)
    btnTime()
    localStorage.removeItem("roomCode")
    localStorage.setItem("roomCode", $("#roomName").val())
    $.ajax({
        type: "POST",
        data: {
            date: tanggal,
            roomCode: $("#roomName").val()
        },
        url: "<?php echo base_url(); ?>/api/reservation/ReservationData",
        success: function(response) {
            response.data.forEach((item, index) => {
                $("#roomName").append($("<option></option>").attr("value", item.id).text(item.name))
            })
            document.getElementById('namrung').textContent = $("#roomName option:selected").text();
        },
        error: function(err) {
            if (err.status == 422) {
                $.each(err.responseJSON.message, function(index, value) {
                    iziToast.error({
                        title: 'Error',
                        message: value,
                    });
                });
            } else if (err.status == 401) {

                iziToast.error({
                    title: 'Error',
                    message: err.responseJSON.message,
                });

                if (err.responseJSON.authError) {

                    localStorage.removeItem('_token');
                    window.location.href = '<?php echo base_url('login'); ?>';
                }
                window.location.href = '<?php echo base_url(); ?>';
            }
        }
    });
}
 

кто-нибудь может помочь в том, что произошло в моем выпадающем списке ?