Hi All,

i want to achieve the following but unfortunatly i don't know much about JS and am sure this is the only way to do it,

I would really apperieate any help and am sure that loads of you JS fundies have sample code that i could use.

I want 3 drop down boxes namely:

Area
Country
City
(I will pull theses from my DB and assign them to the JS dynamically)

when you choose a area the country box should populate and when you select the country the city box.

all the boxes should be default to "All"

here is some code it sort of works but the problems are as follows....
on loading its not displaying "All"

and if you change the area box the 3rd box is not clearing and defaulting to all.

in my db i will hold the data as follows

id | parent_id | name
1 0 Africa
2 1 South Africa
3 2 Johannesburg

I am sure you get the Idea

Code:
  
<script language="JavaScript">
function setOptions(chosen) {
 var selbox = document.myform.country;
  selbox.options.length = 0;
 if (chosen == " " || chosen == "all") {
	 selbox.options[selbox.options.length] = new Option('All','all');  
 }
 <?php
 for ($i = 1; $i <= 10; $i++){
 ?>
 if (chosen == "<?php print $i; ?>") {
	 selbox.options[selbox.options.length] = new Option('All','all');
	 <?php 
   for($j=1; $j <= 10; $j++){
  ?>
	selbox.options[selbox.options.length] = new Option('<?php print $i; ?> - <?php print $j; ?>','<?php print $j; ?>');
  <?php
	}
  ?>
 }
 <?php
 }
 ?>
}
function setOptions2(chosen) {
 var selbox = document.myform.city;
  selbox.options.length = 0;
 if (chosen == " " || chosen == "all") {
	 selbox.options[selbox.options.length] = new Option('All','all'); 
 }
 <?php
 for ($i = 1; $i <= 10; $i++){
 ?>
 if (chosen == "<?php print $i; ?>") {
	 selbox.options[selbox.options.length] = new Option('All','all');
	 <?php 
   for($j=1; $j <= 10; $j++){
  ?>
	selbox.options[selbox.options.length] = new Option('<?php print $i; ?> - <?php print $j; ?>','<?php print $j; ?>');
  <?php
	}
  ?>
 }
 <?php
 }
 ?>
}
</script>
<form action="info.php" method="post" enctype="multipart/form-data" name="myform">
  <div align="center">
<select name="area" size="1"
onchange="setOptions(document.myform.area.options[document.myform.area.selectedIndex].value);">
	  <option value="all" selected>All</option>
	 <?php
  for($i = 1; $i <= 10; $i++){
	print '<option value="'.$i.'">'.$i.'</option>';
  }
  ?>
	</select><br />
	<select name="country" size="1" onchange="setOptions2(document.myform.country.options[document.myform.country.selectedIndex].value);">
	</select>
	<br>
	<select name="city" size="1" id="city">
	</select>
	<br>
	<input name="submit" type="submit" id="submit" value="submit">
</div></form>
in my sample code i am just doing a basic loop to view the desired effect

Thanks for any help

K-