Dynamic Drop Down Visibility Issue
Posted: Tue Oct 26, 2004 2:36 pm
Hello
I'm trying to display the contents from a dynamic drop down list. But initially all the list boxes are present. I want to do the following.
Initially only the Country's List box shouls be visible.
When a country is selected , all the states corrosponding to that country should be visible along with the countrys list boz and similarly, if i select a state, all the cities in that state whould be visible along with country and state list boxes.
Here is the code that works without the visibility.
I'm trying to display the contents from a dynamic drop down list. But initially all the list boxes are present. I want to do the following.
Initially only the Country's List box shouls be visible.
When a country is selected , all the states corrosponding to that country should be visible along with the countrys list boz and similarly, if i select a state, all the cities in that state whould be visible along with country and state list boxes.
Here is the code that works without the visibility.
Code: Select all
<?php
echo "<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> ";
echo "<title>Dynamic Drop Down List</title></head> <body> ";
echo "Hello";
require_once('Connections/mysql_conn.php');
echo "<FORM name=f1 action="$_SERVER[PHP_SELF]" method=post>";
$result = mysql_query("SELECT COUNTRY.COUNTRYNAME,STATE.COUNTRYID, CITY.STATEID, STATE.STATENAME,CITY.CITYNAME,CITY.ID FROM COUNTRY, STATE, CITY WHERE STATE.COUNTRYID = COUNTRY.ID and CITY.STATEID=STATE.ID");
echo "<CENTER><BR><B>Dynamic Drop Down Boxes (in PHP)</B><BR>";
// write the country's listbox...
echo "<b>Country</b>";
echo "<select name = "country" size="1" onchange="countryselected(this);">";
echo "<option value=0></option>";
$sJavaScript = "
function countryselected(elem) {\n for ( var i = document.f1.state.options.length; i>=0;i--){\n document.f1.state.options[i]=null;\n} for ( var i = document.f1.city.options.length; i>=0;i--){\n document.f1.city.options[i]=null;\n";
$sLastCountry="";
$sLastState="";
$sLastCity="";
while ( $row = mysql_fetch_array($result) )
{
// is this a new country?
If ($sLastCountry!=$row["COUNTRYNAME"])
{
// if yes, add the entry to the country's listbox
$sLastCountry = $row["COUNTRYNAME"];
echo "\n<OPTION VALUE='".$row["COUNTRYID"]."'>".$sLastCountry."</OPTION>";
// and add a new section to the javascript...
$sJavaScript = $sJavaScript."}\n"."if (elem.options[elem.selectedIndex].value==".$row["COUNTRYID"]."){\n";
}
// is this a new state?
If ($sLastState!=$row["STATENAME"])
{
// if yes, add the entry to the states's listbox
$sLastState = $row["STATENAME"];
// and add a new state line to the javascript
$sJavaScript = $sJavaScript."document.f1.state.options[document.f1.state.options.length] = new Option('".$row["STATENAME"]."','".$row["STATEID"]."');\n";
}
$sJavaScript = $sJavaScript."\n"."if (document.f1.state.options[document.f1.state.selectedIndex].value==".$row["STATEID"]."){\n";
$sJavaScript = $sJavaScript."document.f1.city.options[document.f1.city.options.length] = new Option('".$row["CITYNAME"]."','".$row["ID"]."');\n}";
// is this a new city?
}
// finish the country's listbox
echo "</SELECT></TD>";
$result1 = mysql_query("SELECT COUNTRY.COUNTRYNAME,STATE.COUNTRYID, CITY.STATEID, STATE.STATENAME,CITY.CITYNAME,CITY.ID FROM COUNTRY, STATE, CITY WHERE STATE.COUNTRYID = COUNTRY.ID and CITY.STATEID=STATE.ID");
echo "<b>State</b>";
echo "<select name = "state" size="1" onchange="stateselected(this);">";
echo "<option ></option>";
$tJavaScript = "
function stateselected(elem) {\n for ( var i = document.f1.city.options.length; i>=0;i--){\n document.f1.city.options[i]=null;\n";
$sLastState="";
$sLastCity="";
while ( $row = mysql_fetch_array($result1) )
{
// is this a new country?
If ($sLastState!=$row["STATENAME"])
{
// if yes, add the entry to the country's listbox
$sLastState = $row["STATENAME"];
// and add a new section to the javascript...
$tJavaScript = $tJavaScript."}\n"."if (elem.options[elem.selectedIndex].value==".$row["STATEID"]."){\n";
}
// is this a new state?
// and add a new state line to the javascript
$tJavaScript = $tJavaScript."document.f1.city.options[document.f1.city.options.length] = new Option('".$row["CITYNAME"]."','".$row["ID"]."');\n";
}
// finish the country's listbox
echo "</SELECT></TD>";
echo "\n<TD valign="center">CITY</TD><TD><SELECT NAME="city" SIZE=1>";
echo "<OPTION></OPTION>";
echo "</SELECT></TD></TR>";
echo "<TR><TD><font style='font-size=10'></TD><TD></TD><TD></TD><TD><INPUT TYPE=SUBMIT NAME='submitcity' VALUE='SUBMIT'></TD></TR>";
echo "</TABLE>";
// finish the javascript and write out
$sJavaScript = $sJavaScript."\n}\n}\n";
$tJavaScript = $tJavaScript."\n}\n}\n";
echo "\n<SCRIPT LANGUAGE="JavaScript">";
echo "\n".$sJavaScript."\n";
echo "\n".$tJavaScript."\n</SCRIPT>\n";
//close the form
echo "</FORM></center>";
//code to test the submit button
//normally people would save the index in another table
//this example only display the indexe
/*
if ("SUBMIT" == $submitcity)
{
echo "<center>Your Selected Country index= ".$country."<BR>";
echo "Your Selected City index= ".$city."<BR></center>";
}
*/
echo "</body></html>";
?>