下拉值依赖于另一个下拉值

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