2013-03-12 7 views
0

У меня есть список выбора, который содержит количество гостей на комнату, мне нужно держать, код:Как я могу показать div (s) по выбранной опции?

<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-х человек, мне нужно только показать дивы с идентификаторами одного и двойной как это:

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

Если я выбираю более 2 мы должны показать все номера типа DIV.

Если я выбираю 1 человека, мне нужно показать div только для .

Как это сделать с помощью ajax?

+0

Если вы не выборка данных номеров с сервера ПОСЛЕ того, как пользователь делает выбор, AJAX не является подходящим инструментом для работы, JavaScript это. –

+0

Не похоже, что вам нужен AJAX. AJAX предназначен для получения или отправки данных на сервер. Поскольку у вас, кажется, есть вся информация, которая вам нужна на странице уже (выбор и два divs, которые вы хотите показать или скрыть), вам не нужно AJAX - это точно сказать, что все это уже на странице? Или что-то не хватает в вашем вопросе? –

ответ

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, используемых:

0

Установите оба дивы для отображения: нет и отправить значение выбора для вашей 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 
    } 
} 
Смежные вопросы