Dynamic Drop Downs and Dynamic Image Change

[loomer]

Here is what I would like to do:

I have successfully pieced together some PHP and Javascript along with MySQL to create a dynamic drop down menu. The first drop down lists a series of metal alloys. The second drop down box will dynamically list the appropriate product lines (I-Beam, Angle, Round, etc.) according to what the user has selected.

I also have a small picture for each of the 12 product lines. What I would like to do is only display the picture of the product line if it appears in the second drop down menu (in other words only display the picture if that product line is selectable).

I guess I am having trouble getting through the javascript to create a proper array. It seems to me that the query is basically the same as I have but I just can't work out the next step here. I would like the pictures to change dynamically along with the drop downs (no page reloading).

Here is the code I have so far:

    echo "<form name=\"f1\" action='$PHP_SELF' method=\"post\">\n"; 


//read the database 

$result = mysql_query("SELECT alloytest.alloy_Name,productline.proLine_AlloyID,productline.proLine_Name,productline.proLine_ID FROM productline,alloytest WHERE productline.proLine_AlloyID=alloytest.alloy_ID ORDER BY alloytest.alloy_Name"); 

//write the table 

echo "<table width=\"200\" border=\"0\" cellpadding=\"5\" cellspacing=\"5\">"; 

// write the alloy's listbox... 

echo "<tr><td valign=\"middle\" align=\"center\"><font color=\"#000000\" face=\"verdana,arial,helvetica\" size=\"2\">Alloy</font></td><td><select name=\"Alloy\" size=\"1\" onchange=\"alloyselected(this);\">\n"; 

// write the entry code for the javascript...\n is used to force a new line so the resultant code is more readable 

$sJavaScript = "function alloyselected(elem){\n for (var i = document.f1.proLine.options.length; i >= 0; i--){ \n document.f1.proLine.options[i] = null;\n"; 

// loop through the database.. 

$sLastAlloy=""; 
    echo "<option value=\"#\" selected>Select Alloy</option>"; 
    echo "<option value=\"#\" >------------</option>"; 

while ( $row = mysql_fetch_array($result)) 
    { 
        // is this a new alloy? 

            If ($sLastAlloy!=$row["alloy_Name"]){ 

        // if yes, add the entry to the alloy listbox 

            $sLastAlloy = $row["alloy_Name"]; 

            echo "\n<option value='".$row["proLine_AlloyID"]."'>".$sLastAlloy."</option>"; 

        // and add a new section to the javascript... 

            $sJavaScript = $sJavaScript."}\n"."if (elem.options[elem.selectedIndex].value==".$row["proLine_AlloyID"]."){\n"; 

        } 

        // and add a new city line to the javascript 

            $sJavaScript = $sJavaScript."document.f1.proLine.options[document.f1.proLine.options.length] = new Option('".$row["proLine_Name"]."','".$row["proLine_ID"]."');\n"; 
    } 

        // finish the alloy's listbox 

     echo "</select></td></tr>"; 

// create the productline listbox for no selection 

echo "\n<tr><td valign=\"center\" align=\"center\"><font color=\"#000000\" face=\"verdana,arial,helvetica\" size=\"2\">Product Line</font></td><td><select name=\"proLine\" size=\"1\">"; 
echo "<option>[no alloy selected]</option>"; 
echo "</select></td></tr>"; 
echo "<tr><td align=\"center\" colspan=\"2\"><input type=\"submit\" name=\"submittest\" value=\"SUBMIT\"></td></tr>"; 
echo "</table>"; 

// finish the javascript and write out 

$sJavaScript = $sJavaScript."\n}\n}\n"; 
echo "\n<SCRIPT LANGUAGE=\"JavaScript\">"; 
echo "\n".$sJavaScript."\n</SCRIPT>\n"; 

//close the form 

echo "</FORM></center>";