0

我有一个选择列表，其中包含我需要保留的房间的客人数量，代码是：

<select name="txtHotelGuestNO" id="txtHotelGuestNO" class="hotels" onchange="show_room_choose()">
    <? for($i=1;$i<=100;$i++) echo "<option value=$i>$i</option>"; ?>
    </select>

如果我选择 2 个人，我只需要显示 id 为single和double的 div，如下所示：

    <div id="single"> ... code</div>
<div id="double">... code</div>

如果我选择超过 2 个，我们需要显示所有房间类型 div。

如果我选择 1 个人，我只需要显示single的 div 。

如何使用 ajax 做到这一点？

4

2 回答 2

0

如果你可以使用 jQuery：

// Wait for DOM to be ready (if you are including the JavaScript before the HTML, ie the <head>)
$(document).ready(function()) {
    // listen for when the user changes the value in the <select> dropdown
    $('#txtHotelGuestNO').change(function() {

        // get value selected
        var value = parseInt($(this).val(), 10);  // parseInt() converts the value to integer (base 10)

        if (value < 2) {
            // single
            $('#single').show();
            $('#double').hide();
        } else {
            // double
            $('#double').show()
            $('#single').hide();
        }
    });
});

您可以了解有关使用的 jQuery 方法的更多信息：

于 2013-03-12T19:47:40.047 回答
0

将两个 div 设置为 display:none 并将选择的值发送到您的 onchange 函数：

function show_room_choose(value) {
     if(value==1) { 
          document.getElementById("single").style.display = "block"; 
          document.getElementById("double").style.display = "none";
     } else if(value==2) { 
          document.getElementById("single").style.display = "block"; 
          document.getElementById("double").style.display = "block";
     } else  { 
          document.getElementById("single").style.display = "block"; 
          document.getElementById("double").style.display = "block";
          // add whatever other divs to show here
     }
}
于 2013-03-12T19:58:38.817 回答