ajax - Dropdown value depends on another dropdown value -

i have type of form in have 1 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> 

if user selects lunch want display dropdown :

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

and if user selects dinner want display 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> 

and if user selects both last 2 dropdown should display. tried using ajax :

 <script type="text/javascript">             function coajax()             {                 var xmlhttp;                 if (window.xmlhttprequest)                 {// code ie7+, firefox, chrome, opera, safari                     xmlhttp=new xmlhttprequest();                 }                        else                 {// code 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> 

but got confused.what should do?

make simplier submitting node:

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

now javascript create request object cross-platform:

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

next create event handler:

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

now create callback handler:

function coajax_finish() {     if (requestobj.readystate == 4)     {         document.getelementbyid('ldb_target').innerhtml = requestobj.responsetext;         document.getelementbyid('ldb').enabled = true;     } } 

on php side it's quite simply:

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