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がシングルおよびダブルのdivのみを表示する必要があります。

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

2つ以上を選択した場合は、すべての部屋タイプのdivを表示する必要があります。

1人を選択した場合、シングルの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 に答える