我是ajax的新手，我真的需要帮助。我真的不知道如何解决这个问题，这是我的问题：我希望我的ajax响应只显示我在表中的选择框上所做的更改。我已经解决了每当我在第一个选择框中选择时如何弹出另一个选择框，但问题是它只发生在我表的第一行。我的ajax代码：
<script type="text/javascript">
function guest() {
var rooms = document.getElementById("select_rooms").value;
var some = document.getElementById("room_type").value;
var url = "guest.php?rooms="+rooms+"&id="+some;
var method = "GET";
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("guest").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open(method, url, true);
xmlhttp.send(null);
document.getElementById("guest").innerHTML = "loading...";
}
</script>
对于我的桌子：
<table>
<?php
$query_roomtype = mysql_query("select * from tb_category");
while($row_type = mysql_fetch_array($query_roomtype)){
$query2 = mysql_query("select sum(no_of_room) As sum from tb_reserve where status != 'Checkout' AND arrival < '$end' AND departure > '$start' AND category_id = '$row_type[category_id]' OR status != 'Cancelled' AND arrival < '$end' AND departure > '$start' AND category_id = '$row_type[category_id]'");
$sum_query2 = mysql_fetch_assoc($query2);
$ar = $row_type['max_room'] - $sum_query2['sum'];
?>
<tr>
<td style='width: 40%;'>
<h4><?php echo $row_type['category_name']; ?></h4>
<img src='<?php echo $row_type['photos']; ?>' width='250' style='border-radius: 5px; border: 2px solid #999;'> <br /><br />
<p style="text-align: left;">
Occupancy: <u><?php echo $row_type['max_guest']; ?> Guest </u><br />
Size: <u><?php echo $row_type['size']; ?> </u><br />
Price: <u><?php echo number_format($row_type['price'], 2, '.', ','); ?></u> <br />
</p>
</td>
<td style="text-align: left;">
<?php echo $row_type['description']; ?>
<hr>
Available Rooms: <?php echo $ar . " / " . $row_type['max_room']; ?><br />
<div class="contact-wrap">
<div class="main-reservation-form-caption">Select No. of Rooms: </div>
<div class='select-styling-wrap1' style="border: 1px solid #999; width: 50px;">
<select style="width: 50px; border: 1px solid #999; height: 40px;" id="select_rooms" name="select_rooms" onchange="guest()">
<option value="">0</option>
<?php
$i = 1;
while($i <= $ar){
echo "<option value='$i'>$i</option>";
$i++;
}
?>
</select>
</div>
</div>
<div style="clear:both"></div>
<div class="guest-wrap">
<div id="guest" class="guest">
</div>
</div>
</td>
<?php } ?>
</tr>
</table>
不要使用mysql_函数
它们已被弃用。现在，您很容易受到SQL注入攻击。请阅读MySQLi或PDO。这真的非常重要。
只对数据库进行一次查询
现在，您正在对每个房间类型的数据库进行一次查询。这会导致数据库上出现不必要的负载，并使代码速度变慢。虽然没有上述要点那么重要，但仍然值得修正。使用GROUP BY：
SELECT
SUM(tb_reserve.no_of_room) AS sum,
[all the fields from tb_category you want]
FROM tb_reserve, tb_category
WHERE
tb_category.category_id = tb_reserve.category_id AND
[all your other conditions]
GROUP BY tb_category.category_id
你的问题
您只会更改表的第一行，因为所有的选择框和guestdiv都具有相同的ID——select_rooms和guest。getElementById只是返回具有该ID的第一个元素，即第一行中的元素。
解决方案是给它们不同的id，比如select_rooms_1、select_rooms_2和son on，类似的还有guest_1、guest_2等等。然后你需要通知guest()函数要更改哪一行。这可以通过多种方式实现。
一种方法是简单地更改每行的onchange属性，使其显示onchange="guest(1)"、onchange="guest(2)"等，而不是onchange="guest()"。然后，更改guest()函数以获取该参数：
function guest(room_number) {
var rooms = document.getElementById("select_rooms_" + room_number).value;
...
另一种方法是通过查看触发事件的元素的id或cutom data-row-number属性来确定您所在的行：
<select id="select_rooms_1" data-row-number="1" ...>
为了能够获得这些信息，您需要对触发onchange事件的元素的引用。如果使用JavaScript而不是内联onclick属性添加事件，则可以访问guest()函数中的变量this，因此可以执行以下操作：
var row_number = this.getAttribute("data-row-number");
var rooms = document.getElementById("select_rooms_" + row_number).value;
此外，使用JavaScript库(如jQuery(编写此代码可能会更容易。