...

View Full Version : Passing Values between Pull Down Menus



Sam Hughey
08-13-2004, 03:26 PM
The following script passes values from pull down menu to another. From the first to the second pull down menu this is not a problem but for some reason I cannot understand how to make the second pull down menu pass values to the third pull down menu and so on. Any advice will be greatly appreciated.

The objective is when (from the second menu) HARDWARE is clicked on, the values in bold (only) will appear in the third menu. This will work successively with other menus.



<script language="JavaScript">
<!-- hide from old browsers...

/* dynamic select menus -- written by Matt Reinfeldt
feel free to use, modify, copy, distribute, and otherwise abuse this code!
if you find any problems, let me know, and I will try to find a fix for it.
*/

var info = new Array(
"SMS*HARDWARE|SOFTWARE|COMMUNICATIONS|MIS-DIRECTED|PROCEDURE*ARNET BOARD|CASH DRAWER|CHECK READER|COMPUTER|DEBIT PAD|DISPLAY BAR|EAS|HUB|KEYBOARD|MONEY ORDER|MONITOR|PDA|PRICE VERIFIER|PRINTER|REGISTER|RF SACNNER - SYMBOL|RF SCANNER - TELXON|SCANNER|TELEPHONE|TERMINAL|UPS|SOFTWARE|COMMUNICATIONS|MIS-DIRECTED|PROCEDURE",
"INTERNATIONAL*HARDWARE|SOFTWARE|COMMUNICATIONS|MIS-DIRECTED|PROCEDURE",
"CUSTOMER SERVICE*COMPLAINT|COMPLIMENT|E-COMMERCE|OPERATOR",
"SYSTEM SUPPORT*AZ GOLD|COMMUNICATION|HARDWARE|MIS-DIRECTED|PROCEDURAL|SOFTWARE",
"MAINTENANCE*FACILITY|LIGHTING|PROPERTY|VAN-SUPPLIES"
);

/**************************************************************************************************** **/

function stringSplit ( string, delimiter ) {
if ( string == null || string == "" ) {
return null;
} else if ( string.split != null ) {
return string.split ( delimiter );
} else {
var ar = new Array();
var i = 0;
var start = 0;
while( start >= 0 && start < string.length ) {
var end = string.indexOf ( delimiter, start ) ;
if( end >= 0 ) {
ar[i++] = string.substring ( start, end );
start = end+1;
} else {
ar[i++] = string.substring ( start, string.length );
start = -1;
}
}
return ar;
}
}
/**************************************************************************************************** **/
var menu1 = new Array();
var menu2 = new Array();
var menu3 = new Array();
/**************************************************************************************************** **/
function createMenus () {

for ( var i=0; i < info.length; i++ ) {
menu1[i] = stringSplit ( info[i], '*' );
menu2[i] = stringSplit ( menu1[i][1], '|' );
menu3[i] = stringSplit ( menu1[i][1], '|' );
}

var author = document.myForm.main;
var book = document.myForm.title;

author.length = menu1.length;
book.length = menu2[0].length;
book.length = menu3[0].length;

for ( var i=0; i < menu1.length; i++ ) {
author.options[i].value = menu1[i][0];
author.options[i].text = menu1[i][0];
}
document.myForm.main.selected = 0;
for (var x=0; x < menu2[0].length; x++) {
book.options[x].text = menu2[0][x];
book.options[x].value = menu2[0][x];
}
document.myForm.main.selected = 0;
for (var x=0; x < menu3[0].length; x++) {
book.options[x].text = menu3[0][x];
book.options[x].value = menu3[0][x];
}
document.myForm.title.selected = 0;
}

/**************************************************************************************************** **/

function updateMenus ( what ) {
var sel = what.selectedIndex;

if ( sel >= 0 && sel < menu1.length )
var temp = menu2[sel];
else
var temp = new Array ();

what.form.title.length = temp.length;

for ( var i = 0; i < temp.length; i++ ) {
what.form.title.options[i].text = temp[i];
what.form.title.options[i].value = temp[i];
}
what.form.title.selected=0;
}
// end of hiding -->
</script>




<form name=myForm>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="33%">
<font size="1" face="Verdana">Ticket Type:<select name="main" size=1 onChange="updateMenus(this)">
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<option>
<option>
</select> </font></td>
<td width="29%">
<font size="1" face="Verdana">Class:<select name="title" size=1>
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<option>
<option>
</select></font></td>
<td width="38%">
<font size="1" face="Verdana">&nbsp;Category:<select name="category" size=1>
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<option>
<option>
</select></font></td>
</tr>
</table>
</form>

Thanks,
Sam Hughey

Willy Duitt
08-13-2004, 09:29 PM
Have you read the companion tutorial (http://www.javascriptkit.com/howto/pulldown.shtml) for this script?

One of the problems is that you are trying to use this script in a manner which it is not intended for. This script was intended to be used with only two option menus and it uses two delimiters a * and | to split the various sets out of the original array. What you are trying to do is expand upon this which would require additional delimiters to split at and quite frankly, it would be much better to use seperate arrays rather than one gigantic array....

However, you fail to mention how many option menus you ultimately will be using. Perhaps if you could explain exactly what you are trying to accomplish someone may be able to point you in the right direction....

......Willy

Sam Hughey
08-13-2004, 11:37 PM
Willy,

Thanks for letting me know what I obviously overlooked. In all I want 5 pull down menus. I did read the companion tutorial but I didn't see anything that would (to me) restrict it to only the two menus. In fact, I emailed Matt Reinfeldt but he never responded.

The first menu would have the following default options:
SMS
INTERNATIONAL
CUSTOMER SERVICE
SYSTEM SUPPORT
MAINTENANCE
TELECOM

The second menu would have the following options if SMS was chosen in the first menu:
HARDWARE
SOFTWARE
COMMUNICATIONS
MIS-DIRECTED
PROCEDURE

The third menu would have the following options if HARDWARE was chosen in the second menu:
ARNET BOARD
CASH DRAWER
CHECK READER
COMPUTER
DEBIT PAD
DISPLAY BAR
EAS|HUB
KEYBOARD
MONEY ORDER
MONITOR
PDA
PRICE VERIFIER
PRINTER
REGISTER
RF SACNNER - SYMBOL
RF SCANNER - TELXON
SCANNER
TELEPHONE
TERMINAL
UPS

The fourth and fifth menus would follow the same pattern. Any direction you can offer will be greatly appreciated.

Thanks,
Sam Hughey



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum