下拉值依賴於另一個下拉值

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> 

並且如果用戶選擇晚餐然後我想要顯示下拉菜單：

<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

讓它simplier通過提交節點：

<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 
    } 
?>