linked drop down boxes

Anon

I need help, I am trying to make a series of drop down boxes, with javascript. What someone selects in the first drop down box, makes something apear in the second, then they can pick something in the second, and it will effect the third, does anyone know how to do this, responses would be greatly appreciated!

Adam

Anon

I will be faced with this same dilema in the future and have been putting thought into it.

My situation will be specific to individual clients, so I think I'm going to go with a javascript onChange > set 'not done' variable > Submit form. When the 'not done' variable is sent to the form, it will use the data from the parent drop down to retrieve the child drop down then show the form again with all of the data populated as it was prior to the 'not done' post.

If you have static data, it may be easier to write this in javascript. You can of course write this in php and javascript with dynamic data....I really don't know the best method or even if there is one. Perhaps this is another case-by-case call.

Anon

Actually there is a way, but its a bit complicated (isn't everything). I do the NetherReal web site and am currently turning everything over to php3 and mySQL. This is a tool I am working on to edit records in the Cthulhu Lexicon, the intent is to select the record by first selecting the letter and then selecting the appropriate record. (I hope this comes out right, if you want to see this in action go to http://www.netherreal.de/library/modify.php3. The submit button isn't there, but you can see what this does.

HTH.

Jim Hawley

function addEntry($alpha) { //  this function is used later to populate the JavaScript function

	link_up();

// a function I use to connect to my database, insert your own connection code

	$qrystr = "SELECT * from lexicon WHERE name LIKE '" . $alpha . "%' ORDER BY name ASC";
	//query string to get the information

	//error trap
	if(!$result = mysql_query($qrystr)) {
		echo("<p>Sorry, no matches found or the database is currently offline.</p>\n");
		exit();
	}

	$totals = mysql_affected_rows(); //see how many records there are

	if($totals == 0) { //if there are no records, say so
		echo("\"('No records')\"");
	} 

	$numbers = 0; //base number for the array that holds the names of the selections

	while($row = mysql_fetch_array($result)) {

		//create variable for the lexicon reference entry itself
		$entry[$numbers] = "\"('$row[0]')\"";
		$numbers++;
	} 

	//determine how many entries there were for this letter of the alphabet
	//so we can loop the proper amount of times to write them
	$rotations = count($entry) - 1;
	for($j = 0; $j < $rotations; $j++) {
		echo("\t\t" . $entry[$j] . ",\n");
	}

	//One last line to finish things off
	$final = $rotations;
	echo("\t\t" . $entry[$final] . ");\n");

}

$top = "\n<head>\n<title>The Cthulhu Lexicon - Modification Form</title>\n" .
       "<style>\n<!--\n.comm        { font-family: Arial, sans-serif; font-size: 8pt }\n" .
       "p            { font-size: 10pt }\n-->\n</style>\n" .
       "<link rel=\"stylesheet\" type=\"text/css\" href=\"../css/lexicon.css\">\n" .
       "<script Language=\"JavaScript\">\n<!--\n\n";

echo($top);

//now write it out
for($i = 65; $i < 91; $i++) {
	$letter = chr($i);
	echo("var " . $letter . "Array =  new Array(\"('Select Entry','',true,true)\",\n");
	addEntry($letter);
}		

//the rest of the JavaScript function
echo("function populateEntries(inForm,selected) {\n\n" .
	 "\tvar selectedArray = eval(selected + \"Array\");\n\n" .
	 "\twhile (selectedArray.length < inForm.finalEntry.options.length) {\n" .
	 "\t\tinForm.finalEntry.options[(inForm.finalEntry.options.length - 1)] = null;\n" .
	 "\t}\n\n" .
	 "\tfor (var i=0; i < selectedArray.length; i++) {\n" .
	 "\t\teval(\"inForm.finalEntry.options[i]=\" + \"new Option\" + selectedArray[i]);\n" .
	 "\t}\n\n" .
	 "\tif (inForm.region.options[0].value == '') {\n" .
	 "\t\tinForm.region.options[0]= null;\n" .
	 "\t\tif ( navigator.appName == 'Netscape') {\n" .
	 "\t\t\tif (parseInt(navigator.appVersion) < 4) {\n" .
	 "\t\t\t\twindow.history.go(0);\n" .
	 "\t\t\t} else {\n" .
	 "\t\t\tif (navigator.platform == 'Win32' || navigator.platform == 'Win16'){\n" .
	 "\t\t\t\twindow.history.go(0);\n" .
	 "\t\t\t}\n" .
	 "\t\t}\n" .
	 "\t}\n" .
	 "\tif(inForm.finalEntry.options[0].text == 'Select Entry') {\n" .
	 "\t\tinForm.finalEntry.options[0]= null;\n" .
	 "}\n" .
	 "}}\n" .
	 "//-->\n" .
	 "</script>\n\n");


echo("</head>\n" .
	 "<body background=\"../images/papery.gif\" bgcolor=\"#FFFFB0\">\n" .
	 "<P align=center>\n<IMG alt=\"The Cthulhu Lexicon Database Entry Verification Page\" " .
	 "src=\"../images/lexiconp.jpg\">\n</P>\n<HR>\n" .
	 "<h2>Modify Records</h1>\n" .
	 "<p>Select the letter and then the record you wish to modify from the list" .
	 "below, and then press the Submit button.</p>\n");

echo("<form name=\"entries\">\n" .
	 "<select name=\"region\" onChange=\"populateEntries(document.entries,document.entries.region.options[document.entries.region.selectedIndex].value)\">\n" .
	 "<option selected value=''>Select Letter</option>\n");

for($i = 65; $i < 91; $i++) {
	$letter = chr($i);
	echo("<option value='$letter'>$letter</option>\n");
}

echo("</select>\n" .
	 "<select name=\"finalEntry\">\n" .
	 "<option value=''><--------------------</option>\n" .
	 "</select>\n" .
	 "</form>\n");