オプションのリロードを選択し、他の選択ボックスの値を変更します

Question

2つの選択ボックスがあります。ここで

Select Room Type 
Select Room No. 

は、PHPのコードです：

<select id="room_type" name="room_type" class="form-control"> 
<?php 
$selected = $row['room_type']; 
while($result = mysqli_fetch_array($getroomtypes)){ ?> 
<option value="<?php echo $result['id'];?>" > <?php echo $result['type'];?> </option> 
<?php 
} 
?> 
</select></div> 
</div> 

<div class="form-group"> 
<label class="control-label col-sm-2">Select Room</label> 
<div class="col-sm-5"> 
<select id="room" name="room" class="form-control"> 
<?php 
$selected = $row['room']; 
while($result = mysqli_fetch_array($getroom)){ ?> 
<option value="<?php echo $result['id'];?>"> <?php echo $result['room'];?> </option> 
<?php 
} 
?> 
</select></div> 
</div> 

ので、ここでの問題は、部屋番号が、客室タイプによって異なります。すべての客室タイプには様々な部屋番号があります。誰も私にどのように部屋の種類を選択した後に部屋の値をリロードすることができます私を示唆することはできますか？

私はブートストラップを使用しています。

Answer 1

部屋番号をリロードするにはJSを使う必要がありますが、これは決して最良の方法ではありませんが、スクリプト（jQueryを使用しています）を使用する方法です。 DBでも安全性が低い：

$('#room_type').on('change', function(e){ // when the room_type changes 
    $('#room').remove('option'); // remove all previous options 

    let maxRooms = e.val() == "Shit Muncher Suite" ? 3 : 0; // set max rooms depending on room_type, e.val() is the room_type 

    for(var i = 0; i < maxRooms; i++) { 
    $('#room').add("option").text(i); // add a new option for each room (3) 
    } 

}); 

Answer 2

データベースからの潜在的なデータをページの更新なしで読み込みたい場合は、AJAXを使用する必要があります。 PHPはページ全体を更新せずに新しいデータを読み込むことはできません。私は助けたと思った：