Question

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

<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个人，我只需要显示带有ids 单和 double 的div，如下所示：

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

如果我选择的次数超过2，我们需要显示所有房型div。

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

如何使用ajax执行此操作？

Answer 1

如果你可以使用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方法的更多信息：

.change()：http://api.jquery.com/change/
.val()：http://api.jquery.com/val/
.show()：http://api.jquery.com/show/
.hide()：http://api.jquery.com/hide
.ready()：http://api.jquery.com/ready/

Answer 2

将两个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
     }
}

如何通过选择的选项显示div？

2 个答案: