Page 1 of 1

Dynamic Pull-Down Menu of Part #'s to Print Descriptions

Posted: Wed Oct 26, 2005 1:01 pm
by Curtis782
I'm trying to create a dynamic pull-down menu (list of part #'s) where if a user selects a part #, it prints the description to the right of it. How can I do this? I've provided the code I have below and also sample table values.

Please note I will have 10 of these on the same page. Would like default selected values in pull-down menu and description fields to be blank.

Any help with this would be greatly appreciated!

Code: Select all

<?php

print "<html>";
print "<body>";
print "<form>";

include ("common_vars.php");

mysql_connect("$DB_HOSTNAME1", "$DB_USERNAME1", "$DB_PASSWORD1")
or die("Database error!");
mysql_select_db("$DB_NAME1");

// pull-down menu for products
print "<select name='product1'>";
$query = "SELECT * FROM category";
$result = mysql_query($query);
while ($item = mysql_fetch_array($result))
{
	$value = $item['id'];
	$product = $item['category'];
	print "<option value='$value'>$product</option>\n";
}
print "</select>";

// print relevant description based on what product is selected in above pull-down
$query2 = "SELECT * FROM subcategory";
$result2 = mysql_query($query2);
while ($item2 = mysql_fetch_array($result2))
{
	$value2 = $item2['id'];
	$product2 = $item2['subcategory'];
	
	if ($item['id'].value == $item2['id']) { print "$product2"; }
}

print "</form>";
print "</body>";
print "</html>";

?>
Sample table values and table structure:

Code: Select all

CREATE TABLE category ( id int(4) NOT NULL auto_increment, category varchar(100) NOT NULL default '', PRIMARY KEY (id) ) TYPE=MyISAM;

INSERT INTO category VALUES (1, '827');
INSERT INTO category VALUES (2, '834');
INSERT INTO category VALUES (3, '844');
INSERT INTO category VALUES (4, '6051');
INSERT INTO category VALUES (5, '6052');
INSERT INTO category VALUES (6, '6057');
INSERT INTO category VALUES (7, '6058');
INSERT INTO category VALUES (8, '6059');
INSERT INTO category VALUES (9, '6060');
INSERT INTO category VALUES (10, '6061');

CREATE TABLE subcategory ( id int(4) NOT NULL default '0', subcategory varchar(200) NOT NULL default '' ) TYPE=MyISAM;

INSERT INTO subcategory VALUES (1, '20GB 4 mm Tape');
INSERT INTO subcategory VALUES (2, '10GB 8 mm Tape');
INSERT INTO subcategory VALUES (3, '14GB 8 mm Tape');
INSERT INTO subcategory VALUES (4, '20-40GB 1/2 Tape, 50-50 Pin Cable');
INSERT INTO subcategory VALUES (5, '20-40GB 1/2 Tape, 50-68 Pin Cable');
INSERT INTO subcategory VALUES (6, '20-40GB DLT4000, 68-68 Pin Cable, Light Grey');
INSERT INTO subcategory VALUES (7, '20-40GB DLT4000, 50-68 Pin Cable, Light Grey');
INSERT INTO subcategory VALUES (8, '20-40GB DLT4000, 68-68 Pin Cable, Medium Grey');
INSERT INTO subcategory VALUES (9, '35-70GB DLT7000, 68-68 Pin Cable, Light Grey');
INSERT INTO subcategory VALUES (10, '35-70GB DLT7000, 50-68 Pin Cable, Light Grey');

found solution

Posted: Thu Oct 27, 2005 10:29 am
by Curtis782
Found solution using JS:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
 <title>Example</title>
</head>
<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
 var selObj = document.getElementById('selSeaShells');
 var txtIndexObj = document.getElementById('txtIndex');
 var txtValueObj = document.getElementById('txtValue');
 var txtTextObj = document.getElementById('txtText');
 
 var selIndex = selObj.selectedIndex;
 txtIndexObj.value = selIndex;
 txtValueObj.value = selObj.options[selIndex].value;
 txtTextObj.value = selObj.options[selIndex].text;
}
//-->
</script>
 
<body>
<form name="Example_Form">
 <p> <select id="selSeaShells" onChange="showSelected();">
   <option value="val0">sea zero</option>
   <option value="val1">sea one</option>
   <option value="val2">sea two</option>
   <option value="val3">sea three</option>
   <option value="val4">sea four</option>
  </select>
 </p>
 <p> <input type="text" id="txtIndex" /> selectedIndex <br />
  <input type="text" id="txtValue" /> options[].value <br />
  <input type="text" id="txtText" /> options[].text <br />
 </p>
</form>
</body>
</html>