Populating Javascript arrays from database - II

part two - passing results to second drop down menu

[davidhorn01]

Hi all,

I've successfully created a drop down menu that is dependent on a database (yay!).

Currently, there is a second drop down menu that depends on the first, and the results of that menu are contained in a javascript array.

I'd like to replace this array with a query to the database.

The array looks like this:

<script language="JavaScript">
varStockModels = new Array();
varStockModels[0] = new Array('');
varStockModels[1] = new Array('','mazda 3');
varStockModels[2] = new Array('','Punto', 'Bravo', 'Panda');
varStockModels[3] = new Array('','Mondeo','Focus', 'Ka');
varStockModels[4] = new Array('','Mazda6','MX-5');
varStockModels[5] = new Array('','Megane','Clio');
</script>

The contents of varStockModels are now contained in a table called 'Models', but I'm really unsure of how to create a query / PHP coding that would replicate the array above.

The coding I've got to populate the original / parent menu is this:

<?php

$db = mysql_pconnect("localhost", "*******", "*******");
mysql_select_db('carsite');

$sqlMake = "SELECT DISTINCT makeID, makeName FROM makes";

$resultMake = mysql_query( $sqlMake);
while( $rowMake=mysql_fetch_row($resultMake) )
{ $cat_titlesMake[] = $rowMake[1];}
mysql_free_result( $resultMake );

<select name="CarSearchMake" >
<option value="">Select Make</option>
<?
foreach( $cat_titlesMake as $v )
{
echo "<option value=\"";
echo $v;
echo "\">\n";
echo $v;
echo "</option>\n";
}
?>
</select>

Like I say, I've got some javascript that changes the 2nd menu as a result of the first, but I'm looking to replace the array that currently populates the 2nd menu with a database query / PHP.

If anyone has any ideas, I'd really appreciate it!

Many thanks,

david

[httpwebwitch]

I've done this before - generally you don't hit the server again to populate the second box. Instead, you dump all the possibilities into a complex javascript array and repopulate the boxes dynamically.

The problem is a logical one. I'll call the select boxes "box1" and "box2".
If someone selects "A" from box1, then the page would have to reload so that box2 populates itself with "A1,A2,A3". Then when the user submits, you'll have two POST items: box1="A" & box2="A1".

But if the user changes his/her selection in box1, then you might end up with incongruous choices: box1="B" & box2="A1". This can be prevented by making it a 2-step process: choose from box1, then on the next page choose from box2 (where in the second step, box1 is no longer a box, it's just text showing what the choice was in step 1)

Doing a page reload & hitting the server with an "onChange" event is highly annoying. It's better to do all the work with javascript and arrays.

Sticky me and I'll send you some code. K?