Une manière élégante de remplir le menu déroulant avec ajax Sans recharger - javascript, php, jquery, html, ajax

Quelqu'un peut-il m'aider à résoudre ce problème que je veuxpour remplir la liste déroulante avec ajax. lorsque j'insère des données dans la base de données, je veux qu'elles s'affichent sur l'option de sélection sans rafraîchissement. Cette liste déroulante n'est pas basée sur une autre liste déroulante. Il n'y a pas d'autre liste déroulante. une seule liste déroulante.

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);
}
?>

Sortie

Sortie requise: afficher les données en option sans rafraîchissement.

Quelqu'un peut-il me dire comment je résous ce problème. Je suis en phase d'apprentissage de l'ajax et du php. j'ai également fait une recherche sur Google, mais j'ai trouvé la liste déroulante qui se basait les unes sur les autres.Merci

Réponses:

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