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
titleCempave :: 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 selectedSelect 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 selectedSelect 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 trtd$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