使用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);
});