PHP MYSQL Dynamic Select Boxes: Please Help

I have 2 tables: products table product_id (INT 11 AUTOINCRE PRI) product_name (VARCHAR 255) product_desc (VARCHAR 255) color table color_id (INT 11 AUTOINCRE PRI) color (VARCHAR 255) image (VARCHAR 255) product_id (INT 11) I would like to create the first select box (pulling the options from the products table). Then I would like the second select box to display the color option related to the product_id in the first select box, thus changing the options dynamically. I've tried the following and it doesn't seem to work. What am I doing wrong? Please help: <?php include_once("../../config.inc.php"); $DB_NAME = $DB_NAME[0]; if($DB_NAME[0]) { global $DB_HOST, $DB_USER, $DB_PASS, $DB_NAME; mysql_connect($DB_HOST, $DB_USER, $DB_PASS); mysql_select_db($DB_NAME) OR die("MYSQL Error: error selecting DB"); } // this works ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Cempave :: Quality cement products</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="<?php print WEB_ROOT;?>html/style.css"> <script type="text/javascript" src="unobtrusivedynamicselect_ex2to4.js"></script> <script type="text/javascript"> window.onload = function() { dynamicSelect("pda-brand", "pda-type"); } </script> </head> <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> <form action="#">

    <select id="product_name" name="product_name">
        <option value="select" selected>Select a product...</option>

<?php $sql1 = mysql_query("SELECT * FROM products"); while ($row = @mysql_fetch_array($sql1)) { $product_id = $row['product_id']; $product_name = $row['product_name']; print "<option value='$product_name'>$product_name</option>"; } ?>

    </select>

<!--<table>-->

    <select id="color" name="color">
        <option class="select" value="select" selected>Select a color...</option>

<?php $sql1 = mysql_query("SELECT * FROM products LEFT JOIN color ON products.product_id = color.product_id WHERE color.product_id = '$product_id'"); while ($row = @mysql_fetch_array($sql1)) { $product_id = $row['product_id']; $color_id = $row['color_id']; $color = $row['color']; //print "<tr><td>$product_id $color_id $color</td></tr>"; print "<option class='$product_id' value='$color'>$color</option>"; } ?>

    </select>

<!--</table>--> </form> </body> </html> This is all the JavaScript code i used: function dynamicSelect(id1, id2) { // Feature test to see if there is enough W3C DOM support if (document.getElementById && document.getElementsByTagName) { // Obtain references to both select boxes var sel1 = document.getElementById(id1); var sel2 = document.getElementById(id2); // Clone the dynamic select box var clone = sel2.cloneNode(true); // Obtain references to all cloned options var clonedOptions = clone.getElementsByTagName("option"); // Onload init: call a generic function to display the related options in the dynamic select box refreshDynamicSelectOptions(sel1, sel2, clonedOptions); // Onchange of the main select box: call a generic function to display the related options in the dynamic select box sel1.onchange = function() { refreshDynamicSelectOptions(sel1, sel2, clonedOptions); }; } } function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) { // Delete all options of the dynamic select box while (sel2.options.length) { sel2.remove(0); } // Create regular expression objects for "select" and the value of the selected option of the main select box as class names var pattern1 = /( |^)(select)( |$)/; var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)"); // Iterate through all cloned options for (var i = 0; i < clonedOptions.length; i++) { // If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) { // Clone the option from the hidden option pool and append it to the dynamic select box sel2.appendChild(clonedOptions[i].cloneNode(true)); } } } // Attach our behavior onload window.onload = function() { dynamicSelect("product_name", "color"); } Thx in adv Adele