Выпадающее значение зависит от другого значения выпадающего

Question

у меня есть этот тип формы, в которой я один drodown:

<b>Please mention Lunch or Dinner or both</b><br/> 
    <select name="ldb" id="ldb" onchange="coajax();"> 
      <option value=""></option> 
      <option value="1">Lunch</option> 
      <option value="2">Dinner</option> 
      <option value="3">Both</option> 
    </select> 

Если пользователь выбирает обед, то я хочу, чтобы отобразить выпадающий:

<select name="lunch" id="lunch"> 
      <option value=""></option> 
      <option value="">10-12pm</option> 
      <option value="">11-1pm</option> 
      <option value="">12-2pm</option> 
    </select> 

и если пользователь выбирает ужин, то я хочу, чтобы отобразить DropDown:

<select name="dinner" id="dinner"> 
      <option value=""></option> 
      <option value="">4-6pm</option> 
      <option value="">5-7pm</option> 
      <option value="">6-8pm</option> 
      <option value="">7-9pm</option> 
      <option value="">8-10pm</option> 
    </select> 

и если пользователь выбирает и затем два последних выпадающий s отображать. Я попытался с помощью Ajax:

<script type="text/javascript"> 
      function coajax() 
      { 
       var xmlhttp; 
       if (window.XMLHttpRequest) 
       {// code for IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest(); 
       }  
       else 
       {// code for IE6, IE5 
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
       } 

       var q="lunch.php?lid=" + document.getElementById("ldb").value; 
       xmlhttp.open("GET",q,false); 
       xmlhttp.send(null); 

       document.getElementById("lunch").innerHTML=xmlhttp.responseText; 


      } 
     </script> 

, но я получил confused.what я должен делать?

Answer 1

Сделать это проще, подав узел:

<b>Please mention Lunch or Dinner or both</b><br/> 
<select name="ldb" id="ldb" onchange="coajax(this);"> 
     <option value=""></option> 
     <option value="1">Lunch</option> 
     <option value="2">Dinner</option> 
     <option value="3">Both</option> 
</select> 
<span id="ldb_target"></span> 

Теперь Javascript для создания запроса объекта кросс-платформенный:

function RequestObject() { 
    var ReturnValue = null; 
    try { 
     ReturnValue = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    catch (Error) { 
     try { 
      ReturnValue = new ActiveXObject("MSXML2.HTTP"); 
     } 
     catch (Error) { 
      try { 
       ReturnValue = new XMLHttpRequest(); 
      } 
      catch (Error) { 
       // failed 
       return null; 
      } 
     } 
    } 
    return ReturnValue; 
} 

Далее мы создаем обработчик события:

var requestObj = null;   
function coajax(sender) 
{ 
    requestObj = RequestObject(); 
    if (requestObj) 
    { 
     sender.enabled = false; // so a user cannot change till request finished 
     requestObj.open('get', 'luch.php?lid=' + sender.value, true); 
     requestObj.onreadystatechange = coajax_finish; 
     requestObj.send(null); 
    } 
} 

Теперь мы создаем обработчик обратного вызова:

function coajax_finish() 
{ 
    if (requestObj.readyState == 4) 
    { 
     document.getElementById('ldb_target').innerHTML = requestObj.responseText; 
     document.getElementById('ldb').enabled = true; 
    } 
} 

На стороне PHP это довольно просто:

<?php 
    if (!isset($_GET['lid'])) 
     exit; 
    if ($_GET['lid'] == 1 || $_GET['lid'] == 3) 
    { 
?> 
<select name="lunch" id="lunch"> 
     <option value=""></option> 
     <option value="">10-12pm</option> 
     <option value="">11-1pm</option> 
     <option value="">12-2pm</option> 
</select> 
<?php 
    } 
    if ($_GET['lid'] == 2 || $_GET['lid'] == 3) 
    { 
?> 
<select name="dinner" id="dinner"> 
     <option value=""></option> 
     <option value="">4-6pm</option> 
     <option value="">5-7pm</option> 
     <option value="">6-8pm</option> 
     <option value="">7-9pm</option> 
     <option value="">8-10pm</option> 
</select> 
<?php 
    } 
?>