using javascript in a php file to update menus based on selections

[jworisek]

I'll say up front that I am a bit of an idiot when it comes to javascript... With that out of the way, I already have a script that updates on dropdown menu based on the users input for a different menu on the same page. Here is what I want to do:

lets say we have products and sizes

Product A: Sizes (Small, Medium, Xlarge)
Product B: Sizes (Xsmall, Large)
Product C: Sizes (Xsmall, Medium, Large, Xlarge)

right now, in php I place all the values into an array for submitting to the next page

[code]
<select name="product_id[]"><option value=""></option>....</select>
[/code]

The base code that I am currently using is this (NOTE: I build the arrays in php beforehand):

[code]<script LANGUAGE="JavaScript">
<!-- Original:  Jerome Caron ([email protected]) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
colors = new Array(
<? echo $color_array; ?>
);

function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem) {
var i, j;
var prompt;
// empty existing items
for (i = selectCtrl.options.length; i >= 0; i--) {
selectCtrl.options[i] = null;
}
prompt = (itemArray != null) ? goodPrompt : badPrompt;
if (prompt == null) {
j = 0;
}
else {
selectCtrl.options[0] = new Option(prompt);
j = 1;
}
if (itemArray != null) {
// add new items
for (i = 0; i < itemArray.length; i++) {
selectCtrl.options[j] = new Option(itemArray[i][0]);
if (itemArray[i][1] != null) {
selectCtrl.options[j].value = itemArray[i][1];
}
j++;
}
// select first item (prompt) for sub list
selectCtrl.options[0].selected = true;
   }
}
//  End -->
</script>[/code]

[code]<form method="POST" action="two.php" name="Main">
  <h1>New Order</h1>
  <h2>Process</h2>
    <SELECT NAME="process_id" onChange="fillSelectFromArray(this.form.color_id, ((this.selectedIndex == -1) ? null : colors[this.selectedIndex-1]));">
        <OPTION VALUE="-1">Select Process</option>
      <? echo $process_list; ?>
    </SELECT>
    <h2>Enhancement</h2>
    <SELECT NAME="color_id">
      <option value="0">Select Enhancement</option>
    </SELECT>
  <input type="submit" value="submit" name="submit" />
</form>[/code]

In this example, changing the process updates the color list to only colors associated with that process. This is exactly like what I want to do with the products/sizes but the product/sizes has multiple line items and has to be passed as an array. When I try to work the hard brackets into the name being called with this script it simply ignores it. Any ideas?

[nogray]

You can give the select an ID and access the select object using that
[code]
<select name="product_id[]" id="product_id">
[/code]
Javascript will be like
[code]
document.getElementById('product_id')
[/code]

[jworisek]

that should be able to work... the problem is that I don't really have a clue how to adapt that script to use ids instead of names. Can you give me a hand with that?

[!--quoteo(post=387215:date=Jun 23 2006, 11:20 AM:name=nogray)--][div class=\'quotetop\']QUOTE(nogray @ Jun 23 2006, 11:20 AM) [snapback]387215[/snapback][/div][div class=\'quotemain\'][!--quotec--]
You can give the select an ID and access the select object using that
[code]
<select name="product_id[]" id="product_id">
[/code]
Javascript will be like
[code]
document.getElementById('product_id')
[/code]
[/quote]