使用 ajax 填充下拉列表的优雅方式，无需重新加载

Question

谁能帮我解决这个问题我想用 ajax 填充下拉列表。当我在数据库中插入数据时，我希望它在不刷新的情况下显示在选择选项上。此下拉列表不基于其他下拉列表。没有其他下拉菜单。只有一个下拉菜单。

html

 <select name="id" id="id"></select>

jQuery

<script type="text/javascript">
    function bedrooms(){
        $('#id').empty();
        $('#id').append("<option>loading........</option>");
        $.ajax({
            type:"POST",
            url:"checking_database.php",
            contentType:"json",
            success:function(data){
                $('#id').empty();
                $.each(data,function(i,item){
                    $('#id').append('<option>"'+data[i].number_of_bedrooms+'"</option>');
                });
            },
            complete:function(){
            }
        });
    }
    $(document).ready(function(){
        bedrooms();
    });
</script>

checking_database.php

<?php
$data = array();
$con=mysqli_connect("localhost","root","","price");   
$query = mysqli_query($con,"select * from bedroom");
if(mysqli_num_rows($query)){
    while($row = mysqli_fetch_array($query)){
        $data[] = array("number_of_bedrooms" => $row['number_of_bedrooms']); 
    };
    header('Content-type: application/json');
    echo json_encode($data);
}
?>

输出

必需的输出：将数据显示为选项而不重新定义。

谁能告诉我我如何解决这个问题的答案。我正处于 ajax 和 php 的学习阶段。我也用谷歌搜索，但我找到了基于彼此的下拉列表。谢谢

Answer 1

var last_bedroom_data
function bedrooms(){
    if(!last_bedroom_data){
        $('#id').empty();
        $('#id').append("<option>loading........</option>");
    }
    $.ajax({
        type:"POST",
        url:"checking_database.php",
        contentType:"json",
        success:function(data){
            if(last_bedroom_data==JSON.stringify(data)) // data is the same
                return; // skip rendering of html
            updateBedroomSelect(data);
            last_bedroom_data = JSON.stringify(data);
        },
        complete:function(){
        }
    });
}
function updateBedroomSelect(data){
    $('#id').empty();
    $.each(data,function(i,item){
       $('#id').append('<option>"'+data[i].number_of_bedrooms+'"</option>');
    });
}
$(document).ready(function(){
    bedrooms();
    setInterval(bedrooms,3000);
});