Auto-Populate multiple drop down select boxes

Ok i just read the post below this one hoping it might be similar but the issue at hand for me is slightly different. What i've got is three select boxes that needs to be filled. I'm using PHP and MySQL to generate the boxes and pull the data from the database. The first field is auto-populated by a simple query to mysql and a while loop in php.

Now the second select box needs to be automatically filled (should be totaly empty at page load if there wasn't a value in the database for that field to start with) based on the selection of the first field.

The third select box works exactly like the second box other then different information that is based on the input of the second box rather then the first.

Ok i hope you understand all that :) now the issue i'm having is that i don't have a clue how to do this. I've read a few posts on a few forums and seen a few ways to do this but everybody is refering to generating only 2 select boxes rather then three and none of them is considering that there might have to be a automatically selected value in them based on information in the database. for example here are three example peaces of information,

select box one,
1) Car
2) truck
3) Boat

select box two,
1) Mazda (1.car)
2) Ford (1.car)
3) Chevy (1.car)
4) Ford (2.truck)
5) Chevy (2.truck)
6) Dodge (2.truck)
7) Fishing (3.boat)
8) Motorizd (3.boat)
9) Rowing (3.boat)

select box three,
1) Pretege (1.car.1.mazda)
2) 626 (1.car.1.mazda)
3) 323 (1.car.1.mazda)
4) Mustang (1.car.2.ford)
5) Focus (1.car.2.ford)
6) Escort (1.car.2.ford)
7) Camaro (1.car.3.chevy)
so so so

you see the links between the tables? i mean i don't know if the approach should be that way or not but how do you even attack something like this if you don't kow much about javascript? i'm a n00b at javascript and need to get this done asap.

But in the example above if you selected "Car" in the first dropdown then the second box should auto fill in "Mazda","Ford","Chevy" the third box would still be empty until they select one of those three. So if they select "Mazda" the third box should have "Protege",626", "323".

However if there is already results in the database for these fileds then we need to load them as the default values. Man this is a lot isn't it..

Well there is two ways of doing this:

1) Rely on your server side code. After a option is selected, you need to do some sort of post back to the server. This post back will give you the values of the form and then you can do the query to the database.

2)Use JavaScript to do all of the work. Here is a script: http://www.javascriptkit.com/script/script2/triplecombo.shtml When the page first loads, you need to load all of the data into arrays that this script requires.

Eric

Thanks for the reply, i had alread made the submit and re-query script but was hoping to get around that. I'm dealing with a database that has over 150,000 entries and grows about 75 - 100 entries per day. So trying to eleminate the amount of queries is vital to try and keep performance up.

I'll have a look at the link you submitted for me and i'll go from there. Thanks for your input it helps more then you know :)

Ok i got teh script and it works great except one thing. How do i get it to auto select a value based o na variable within php? For example if $value = 3 and during the loop that i have creating the javascript i need to compare them which i do with php but how do i get the 'selected' tag on the line to select the appropriate one?

Here is a small peace of the code,

The PHP generating the javascript to add to the script,

$sqlCounty = mysql_query("select * from COUNTY") or die(mysql_error());
$jsPrint = "";
$jsCount = 0;

while($row = mysql_fetch_object($sqlCounty)){
$i = 0;

if($info->county_id == $row->id){
echo '<option value = "'.$row->id.'"selected>'.$row->name.'</option>';
}else{
echo '<option value="'.$row->id.'">'.$row->name.'</option>';
}

$sqlJava = mysql_query("select * from CENTER where county_id=".$row->id) or die(myqsl_error());
while($js = mysql_fetch_object($sqlJava)){
$i = $i+1;
if($js->id == $row->county_id){
$jsPrint .= "group[".$jsCount."][".$i."]=new Option(\"".$js->name."\",\"".$js->id."\") selected;\n";
}else{
$jsPrint .= "group[".$jsCount."][".$i."]=new Option(\"".$js->name."\",\"".$js->id."\");\n";
}
}

$jsCount = $jsCount+1;
}



Now the actual javascript that is generating the options for the dropdowns.

<script>

var groups=document.main.county.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

<?php echo $jsPrint; ?>
group[0][0]=new Option("Select Center"," ");

group[1][0]=new Option("Select Center"," ");

group[2][0]=new Option("Select Center"," ");

var temp=document.main.center

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
//redirect1(0)
}

var secondGroups=document.main.center.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++) {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++) {
secondGroup[i][j]=new Array() }}


function redirect2(z){
window.location=temp1[z].value
}

</script>


Any helkp on this would be greatly appreciated.