schmack Posted June 13, 2007 Share Posted June 13, 2007 Hello… I have a 3 dropdown “boxes” when I pick one of the first option the second one will be showed. >>>> 1.php <<<< ---------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>!AJAX!</title> <script language="javascript" type="text/javascript"> //------------- <> ------------- var http = getHTTPObject(); function getHTTPObject() { var xmlhttp; if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); else if (window.ActiveXObject) xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); return xmlhttp; } //------------- <> ------------- function getDistritos() { var pais = document.getElementById("pais").value; var url = "1.php?pais="; http.open("GET", url + encodeURI(pais) , true); http.onreadystatechange = handleDistritos; http.send(null); } function handleDistritos() { if(http.readyState==4) { if(http.status==200) { var result = http.responseText; if(result!="null") document.getElementById('distrito').innerHTML = result; } } } function getConcelhos() { var pais = document.getElementById("distrito").value; var url = "1.php?distrito="; http.open("GET", url + encodeURI(distrito) , true); http.onreadystatechange = handleConcelhos; http.send(null); } function handleConcelhos() { if(http.readyState==4) { if(http.status==200) { var result = http.responseText; if(result!="null") document.getElementById('concelho').innerHTML = result; } } } </script> </head> <body> <form name="myform" id="myform"> País: <select name="pais" id="pais" onchange="javascript:getDistritos();"> <OPTION value='0' >Pick a country (pais)</OPTION> <?php include './bd.php'; $result=mysql_query("select pais_id, pais_nome from pais;"); while($row = mysql_fetch_array($result)) { echo("<option value='".$row[0]."'>".$row[1]."</option>"); } mysql_close(); ?> </select> Distrito: <select name="distrito" id="distrito" onchange="javascript:getConcelhos();"> <OPTION value='0' >pick a state (distrito)</OPTION> </select> Concelho: <select name="concelho" id="concelho" onchange="javascript:getFrequesias();"> <OPTION value='0' >pick a city (concelho)</OPTION> </select> </form> </body> </html> --------------------------------------------------------------------------- >>>> 2.php <<<< ------------------------------------------------------------------------------- <?php if (($_GET['pais']==1) || ($_GET['pais']==2) || ($_GET['pais']==3)) { include './bd.php'; $result=mysql_query("select distrito_id, distrito_nome from distrito where distrito_id = '$_GET[pais]';"); while($row = mysql_fetch_array($result)) { print("<option value='".$row[0]."'>".$row[1]."</option>"); } mysql_close(); } if (($_GET['distrito']==1) || ($_GET['distrito']==2) || ($_GET['distrito']==3)) { include './bd.php'; $result=mysql_query("select concelho_id, concelho_nome from concelho where concelho_id = '$_GET[distrito]';"); while($row = mysql_fetch_array($result)) { echo("<option value='".$row[0]."'>".$row[1]."</option>"); } mysql_close(); } ?> ------------------------------------------------------------------------------- I can´t even make the second dropdown work properly… Can anyone help me???? Thanks! Thanks! Thanks! Quote Link to comment Share on other sites More sharing options...
softnmedia Posted June 15, 2007 Share Posted June 15, 2007 You can do it with recursive function calls. While you get the details of the first drop down box add javascript function to the onclick of other option. If you could explain your problem it is easy to understand rather than adding the code. Thanks, Softnmedia Quote Link to comment Share on other sites More sharing options...
tarun Posted June 17, 2007 Share Posted June 17, 2007 Don't Mean To Be Picky BUT PLEASE USE THE [ code ] & [/ code ] Tags (With Out The Spaces) Quote Link to comment Share on other sites More sharing options...
sanfly Posted June 18, 2007 Share Posted June 18, 2007 Shouldnt the line in red below function getDistritos() { var pais = document.getElementById("pais").value; var url = "1.php?pais="; http.open("GET", url + encodeURI(pais) , true); http.onreadystatechange = handleDistritos; http.send(null); } be var url = "2.php?pais="; Quote Link to comment Share on other sites More sharing options...
sanfly Posted June 18, 2007 Share Posted June 18, 2007 I adapted this code for my own use, and found that it worked in Firefox, but not IE It turns out that when you use getElementById in IE, the innerHTML of <select> tags comes back all screwy - it somehow chops out the first <option> tag or something and that, at least for me, was why it wasnt working. You can get around this by using javascript to add the options, but I chose an easier way, and just put my entire <select> drop down in <span> tags, gave that an Id and replaced the whole select drop down rather than just the options. Just another reason why IE sux..... 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.