为什么我的下拉列表 Javascript 显示空白数据

Question

您好，我这里有一个错误，我在这里有下拉菜单，在我单击并选择数据后，下拉菜单在下拉菜单中添加了空白数据。 这是我的下拉菜单的错误，当我单击并在我的下拉菜单中选择另一个时，总是添加数据

这是我的 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(); ?>';
            }
        }
    });
}

任何人都可以帮助我的下拉菜单中发生了什么？