Hi,

I am in process of creating a dynamic country and cities drop down menu for a website. When a select country, it does select the city. I need help with these things:

Need script that show state and zip code fields when United states is selected. If other country is selected, it should be hidden.
I am using php. Is there a better way of doing this? the way i am doing is alot of code and time consuming.
I have to make a complete list of country and cities arrange like below or something that will work for me, Can I get it for free from any where?

Code:
<html>
<head>
<title>PHP/MySQL - Dynamic DropDowns</title>
<SCRIPT LANGUAGE="JavaScript">

function countryselected(elem){
for (var i = document.f1.city.options.length; i >= 0; i--){
document.f1.city.options[i] = null;
}
if (elem.options[elem.selectedIndex].id==1){
document.f1.city.options[document.f1.city.options.length] = new Option('Cambridge','1');
document.f1.city.options[document.f1.city.options.length] = new Option('London','2');
document.f1.city.options[document.f1.city.options.length] = new Option('Bedford','3');
document.f1.city.options[document.f1.city.options.length] = new Option('Manchester','4');
document.f1.city.options[document.f1.city.options.length] = new Option('Brighton','5');
}
if (elem.options[elem.selectedIndex].id==2){
document.f1.city.options[document.f1.city.options.length] = new Option('New York','6');
document.f1.city.options[document.f1.city.options.length] = new Option('Chicago','7');
document.f1.city.options[document.f1.city.options.length] = new Option('Virginia','8');
document.f1.city.options[document.f1.city.options.length] = new Option('Boston','9');
document.f1.city.options[document.f1.city.options.length] = new Option('California','10');
}
if (elem.options[elem.selectedIndex].id==3){
document.f1.city.options[document.f1.city.options.length] = new Option('Dublin','11');
document.f1.city.options[document.f1.city.options.length] = new Option('Cork','12');
document.f1.city.options[document.f1.city.options.length] = new Option('Limerick','13');
document.f1.city.options[document.f1.city.options.length] = new Option('Kerry','14');
document.f1.city.options[document.f1.city.options.length] = new Option('Galway','15');
}
if (elem.options[elem.selectedIndex].id==4){
document.f1.city.options[document.f1.city.options.length] = new Option('Johannesburg','16');
document.f1.city.options[document.f1.city.options.length] = new Option('Cape Town','17');
document.f1.city.options[document.f1.city.options.length] = new Option('Port Elizabeth','18');
document.f1.city.options[document.f1.city.options.length] = new Option('Durban','19');
document.f1.city.options[document.f1.city.options.length] = new Option('George','20');
}
if (elem.options[elem.selectedIndex].id==5){
document.f1.city.options[document.f1.city.options.length] = new Option('Sydney','21');
document.f1.city.options[document.f1.city.options.length] = new Option('Melbourne','22');
document.f1.city.options[document.f1.city.options.length] = new Option('Canberra','23');
document.f1.city.options[document.f1.city.options.length] = new Option('Perth','24');
document.f1.city.options[document.f1.city.options.length] = new Option('Darwin','25');

}
}

</SCRIPT>
</head>
<body>
<form name="f1" action='/su.php' method="post">
<table width="200" border="0" cellpadding="5" cellspacing="5">
<tr>
<td valign="middle" align="center">
<font color="#000000" face="verdana,arial,helvetica" size="2">Country</font>
</td>
<td>
<select name="country" size="1" onchange="countryselected(this);">
<option value="0" id="0">Please Select</option>
<option value="UK" id='1'>United Kingdom</option>
<option value="US " id='2'>USA</option>
<option value="Ireland" id ='3'>Ireland</option>
<option value='South Africa' id ='4'>South Africa</option>
<option value='Australia' id ='5'>Australia</option>
</select>
</td>
</tr>
<tr>
<td valign="center" align="center">
<font color="#000000" face="verdana,arial,helvetica" size="2">City</font>
</td>
<td>
<select name="city" size="1">
<option>[no city selected]</option>
</select>
</td>
</tr>

<!-- //i want these to appear when US is selected -->
<tr>
<td valign="center" align="center">
<font color="#000000" face="verdana,arial,helvetica" size="2">State</font>
</td>
<td>
<select name="state" disabled="true" >
<option value="">[Choose one]</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
</select>
</td>
</tr>

<tr>
<td valign="center" align="center">
<font color="#000000" face="verdana,arial,helvetica" size="2">Zip</font>
</td>
<td><input name="zip" type="text" disabled="true" size="5" maxlength="5">

</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="submitcity" value="SUBMIT">
</td>
</tr>
</table>
</form>
</body>
</html>
thanks