narjis Posted April 13, 2011 Share Posted April 13, 2011 I want to show one select box in which selecting any option would show another select box of sub fields here's the code. <html> <head> <title>Drop down list usage in AJAX</title> <script type="text/javascript"> function show_second(choice){ var xmlhttp; if(window.XMLHttpRequest){ //for firefox xmlhttp = new XMLHttpRequest(); } else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("first").innerHtml = xmlhttp.responseText; } } xmlhttp.open("GET","getSecond.php?q="+choice,true); xmlhttp.send(); } </script> </head> <body> <form> <select name ="first" onchange=show_second(this.value)> <option value="karachi">Karachi</option> <option value="lahore">Lahore</option> <option value="islamabad">Islamabad</option> </select> <p id="second"> </p> </form> </body> </html> php code is as follows <?php $arrKarachi = array("Nazimabad","Gulshan","F.BArea"); $arrIslamabad = array("Defence","kinhgt"); $arrLahore = array("Abc","Def","Ghi"); $val = $_GET["q"]; echo "$val"; switch($val){ case 'karachi': { echo "<select name = 'second'>"; $cnt = count($arrKarachi); for($i=0;$i<$cnt;$i++){ echo "<option value='".$arrKarachi[$i]."'>".$arrKarachi[$i]."</option>"; } echo "</select>"; break; } case 'lahore' : { echo "<select name='second'>"; $cnt = count($arrLahore); for($i=0;$i<$cnt;$i++){ echo "<option value='".$arrLahore[$i]."'>".$arrLahore[$i]."</option>"; } echo "</select>"; break; } case 'islamabad': { echo "<select name='second'>"; $cnt = count($arrIslamabad); for($i=0;$i<$cnt;$i++){ echo "<option value='".$arrIslamabad[$i]."'>".$arrIslamabad[$i]."</option>"; } echo "</select>"; break; } } //case ?> Quote Link to comment Share on other sites More sharing options...
sunfighter Posted April 13, 2011 Share Posted April 13, 2011 Could not get your ajax to work so substituted mine - I also added a first option so that onchange would work NEW HTML CODE <html> <head> <title>Drop down list usage in AJAX</title> <script type="text/javascript"> // Placed in <body> so it exicutes while page loads var httpRequest; if (window.XMLHttpRequest) { // Mozilla, Safari, ... httpRequest = new XMLHttpRequest(); if (httpRequest.overrideMimeType) { httpRequest.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } window.jaxobject = httpRequest; // makes a universal var function show_second(choice) { var httpRequest = window.jaxobject; if (!httpRequest) { alert('Giving up Cannot create an XMLHTTP instance'); return false; } /*url = "test.php?q="+choice;*/ httpRequest.onreadystatechange = function() { alertContents(httpRequest); }; httpRequest.open('GET', "test.php?q="+choice, true); httpRequest.send(''); } function alertContents(httpRequest) { if (httpRequest.readyState == 4) { if (httpRequest.status == 200) { document.getElementById('second').innerHTML = httpRequest.responseText; } else { alert('There was a problem with the request. '+ httpRequest.status); } } } </script> </head> <body> <form> <select name ="first" onchange=show_second(this.value)> <option value="">Make A Choice</option> <option value="karachi">Karachi</option> <option value="lahore">Lahore</option> <option value="islamabad">Islamabad</option> </select> <p id="second"> </p> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.