选择选项重新加载并更改其他选择框

时间:2017-09-25 15:33:10

标签: php select reload

我有两个选择框。

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>

所以这里的问题是房间号取决于房型。每种房型都有不同的房间号码。任何人都可以建议我如何在选择房间类型后重新加载房间的值?

我正在使用bootstrap。

2 个答案:

答案 0 :(得分:1)

你需要使用JS来重新加载房间号码,我会做的方式(绝不是最好的方法)是有一个脚本(我的下面使用jQuery),这比从中提取值更快数据库但不太安全:

$('#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) 
  }

}); 

答案 1 :(得分:1)

如果您希望加载数据库中的潜在数据而不刷新页面,则必须使用AJAX。 PHP无法在不刷新整个页面的情况下加载新数据。希望我帮忙:)。