Help with arrays (updating drop box)

[meowmix]

Heya folks! I have 2 drop down boxes, and I'm trying to get the second to auto refresh based on a selection in the first. I found some code, and it worked perfect : : :

<script language="Javascript">

var arrayData = new Array();

arrayData[0] = 'SALES|[SAL] User 01|'
arrayData[1] = 'SALES|[SAL] User 02|'
arrayData[2] = 'SALES|[SAL] User 03|'
arrayData[3] = 'MARKETING|[MAR] User 01|'
arrayData[4] = 'MARKETING|[MAR] User 02|'
arrayData[5] = 'MARKETING|[MAR] User 03|'
arrayData[6] = 'TECHNOLOGY|[TEC] User 01|'
arrayData[7] = 'TECHNOLOGY|[TEC] User 02|'
arrayData[8] = 'TECHNOLOGY|[TEC] User 03|'


function populateData( name ) {

select = window.document.form.SubCategory;
string = "";

// 0 - will display the new options only
// 1 - will display the first existing option plus the new options

count = 0;

// Clear the old list (above element 0)

select.options.length = count;

// Place all matching categories into Options.

for( i = 0; i < arrayData.length; i++ ) {
string = arrayData[i].split( "|" );
if( string[0] == name ) {
select.options[count++] = new Option( string[1] );
}
}

// Set which option from subcategory is to be selected

// select.options.selectedIndex = 2;

// Give subcategory focus and select it

// select.focus();

}

</script>
<table cellpadding=4 cellspacing=0 border=0>
<tr>
<form name=form method=post action="">
<td><span class=DefMenuText>Departments</span><br>
<select name='category' size=3 style="width:120;"
onChange='javascript:populateData( this.options[selectedIndex].text )'>
<option>SALES</option>
<option>MARKETING</option>
<option>TECHNOLOGY</option>
</select>
</td>
<td><span class=DefMenuText>Department Users</span><br>
<select name="SubCategory" size=3 style="width:120;">
</select>
</td>
</form>
</tr>
</table>

Okay, this works perfect, however, I have a large list of feilds for both. I'm trying to list every state in the U.S in one, and the counties for each state in the other. I coded some basic php to retreive all the states and counties stored locally on a mysql database, so the javascript now looks like :::


<script language="Javascript">

var arrayData = new Array();

<?

$link = mysql_connect("localhost", "root", "") or die("Could not connect");
mysql_select_db("nightaccess") or die("Could not select database");
error_reporting(0);

$i = 0;
$state_query = "SELECT `state` FROM `states`";
$state_result = mysql_query($state_query) or die("Database Error: State Query Failed!");
$state_data = array();

while ($row = mysql_fetch_array($state_result)) {

$county_query = "SELECT `county` FROM `counties` WHERE state='$row[0]'";
$county_result = mysql_query($county_query) or die("Database Error: County Query Failed!");
while ($county_row = mysql_fetch_array($county_result)) {

echo "arrayData[".$i."] = '".$row[0]."|".$county_row[0]."|'\r\n";
$i++;

}

}

?>


function populateData( name ) {

select = window.document.form.county;
string = "";

// 0 - will display the new options only
// 1 - will display the first existing option plus the new options

count = 0;

// Clear the old list (above element 0)

select.options.length = count;

// Place all matching categories into Options.

for( i = 0; i < arrayData.length; i++ ) {
string = arrayData[i].split( "|" );
if( string[0] == name ) {
select.options[count++] = new Option( string[1] );
}
}

// Set which option from subcategory is to be selected

// select.options.selectedIndex = 2;

// Give subcategory focus and select it

// select.focus();

}

</script>




<table cellpadding=4 cellspacing=0 border=0>
<tr>
<form name=form method=post action="">
<td><select name='category' style="width:120;"
onChange='javascript:populateData( this.options[selectedIndex].text )'>
<?

$state_query = "SELECT `state` FROM `states`";
$state_result = mysql_query($state_query) or die("Database Error: State Query Failed!");
$state_data = array();

while ($row = mysql_fetch_array($state_result)) {

echo " <option>".$row[0]."</option>\r\n";

}
?>

</select>
</td>
<td> <select name="county" style="width:120;">
</select>
</td>
</form>
</tr>
</table>

Now, this works perfect, however I notice there starts to be a problem after about 861 (give or take a few) javascript arrays. I'm guessing javascript limits how many array entries you can have? I was wondering if any Javascript guru's can give me a hand with this problem. I could always make a seperate javascript array for each state, but I'm not sure how I'd change the javascript to adjust. Java isn't my forté :/

Any help is greaty appreciated.

[Webskater]

I have done a similar thing putting about 1200 employees into a javascript array with the depots they work in and their employee ids. I did not reach a limit in the array but the way you write multi dimensional javascript arrays meant the page became enormous and ran like a dog.
I solved it by taking the info from the database and putting it into 3 span tags with a delimiter like this:
<span id=empnames>Fred|Bill|Jim|Arthur</span
<span id=empids>25|74|12|96</span>
<span id=depots>London|Manchester|York|Exeter</span>
Then, on any page where I need a drop-down list of depots that, when selected, populates a drop-down list of employees at that depot, I create three javascript arrays on the page using:
DepotIDs = Depots.innerText.split("|");
and the same for the employee names and ids.
The page size is about 35% of the size of the page putting the data into a multi-dimensional javascript array and it runs like the wind. (I put the span tags in the header frame so I can call them from any page on the site - on my site it probably saves 100 calls to the database each day for each of the 1200 users.

[meowmix]

Thanks for the reply, but like I said before, I have 0 clue about javascript. I'm not even that good at php, I'm more of a graphics guy. I was wondering if anyone knew some copy'n'paste or alrternate scripts that I could use.

[meowmix]

** bump.... sorry, but i could use some help :/


edit :


if this helps anyone at all, this is the code after it executes in PHP:

http://www.gotwinked.com/counties.txt