我有一个在线酒店预订系统脚本，客房价格和类型是使用php从数据库中提取的。在此系统中，我只有两个房间。其中一个可容纳最多4人，另一个可容纳最多6人。
预订表单有“从”和“到”日期，“房型”（x套房）等选项，可以从0到1进行选择，每个房间每晚价格为x 120。我还有一个选择“人数”的选项。对于最多2人的设置价格为每晚120元。每增加一个人，价格增加20元。因此，如果套房中有3人，则价格将为140元。我尝试自己使其工作，但我无法根据所选的人数更改价格。
用于人数选择标签的代码如下：
函数checkBookingForm()处理当选择特定房间时的文本更改，并显示该房间容纳的人数。该函数如下：
更完整代码的链接： http://jsfiddle.net/x6ZYB/
<select name="people" class="FormFields" onChange="checkBookingForm()" style="width:70px">
<?php for ($i=1; $i<=$SETTINGS["room_people"]; $i++) {
if ($i==$_REQUEST["people"]) {
$selected='selected';
}
else {
$selected='';
}
?>
<option value="<?php echo $i; ?>" <?php echo $selected; ?>><?php echo $i; ?></option>
<?php }; ?>
</select>
函数checkBookingForm()处理当选择特定房间时的文本更改，并显示该房间容纳的人数。该函数如下：
<script language="javascript" type="text/javascript">
函数检查预订表格() {
var 所有房间 = 新数组();
for(i=0; i<document.NewBookingFrm.elements.length; i++) {
if(document.NewBookingFrm.elements[i].type=="select-one") {
name_t = document.NewBookingFrm.elements[i].name;
if (name_t!=='people') {
value_t = document.NewBookingFrm.elements[i].value;
totalPeople = parseInt(allRooms[name_t]) * parseInt(value_t) + totalPeople;
}
}
}
if (totalPeople==1) {
var acP = 'person';
} else {
var acP = 'people';
};
if (totalPeople!=document.NewBookingFrm.people.value) {
totalPeople = '<strong style="color:red; font-size:14px">'+totalPeople+'</strong>'
}
document.getElementById('PeopleAccommodate').innerHTML = 'selected room(s) can accommodate ' + totalPeople + ' ' + acP;
}
我尝试了不同的方法，但由于我同时正在学习Javascript，所以我一无所获。我仍在努力理解DOM的工作原理。如果有人能指点我正确的方向，我将非常感激。我明白我必须对代码做什么：
- 首先检查选择了多少人
- 然后检查是否选择了任何房间（如果值为1）
- 如果选择了一个房间，则相应地增加或减少价格。
对于可用客房数量，我目前拥有这段代码：
<select name="room_<?php echo ReadFromDB($row["id"]); ?>" class="FormFields" onChange="checkBookingForm()" style="width:70px">
<option value="0">0</option>
<?php for ($i=1; $i<=$available_rooms; $i++) {
if ($i==$booked_rooms["quantity"]) $selected=' selected'; else $selected='';
?>
<option value="<?php echo $i; ?>"<?php echo $selected; ?>><?php echo $i; ?></option>
<?php }; ?>
</select>
x
更完整代码的链接： http://jsfiddle.net/x6ZYB/