 |
| The select menu should work something like this. Change the first list and the second list also changed |
Although this is a very small javascript trick, but nevertheless a very useful one! While creating forms, you would sometimes like to change a drop down list dynamically depending on which option was chosen in a earlier list(This may be a radio button, a list itself or anything else)
Here is a step by step procedure:
1. Write down the names and values for first drop down box e.g; Psojae V1-> name, psv1 -> value; Psojae V5-> name, psv5-> value and so on...
2. For each name in first drop down list, make a sublist of name value pairs, you want to appear on select: for example, for Psojae V1: PS1->name; ps1->value; PS2->name; ps2->value AND for Psojae V4: WI1->name; wi1->value; WI2->name; wi2->value.
3. Now write a javascript with all these primary lists and sublist name value pairs something like this:
<script language="javascript">
var lists = new Array();
//First List
lists['psv5'] = new Array(); // Notice here you are making a list with the value of first list
lists['psv5'][0] = new Array( // These are the names you want to appear on the second list
'WI1',
'WI2'
);
lists['psv5'][1] = new Array( //These are the values you want to pass on from the second list
'wi1',
'wi2'
);
//Second List
lists['psv1'] = new Array(); // Notice here you are making a list with the value of first list
lists['psv1'][0] = new Array( // These are the names you want to appear on the second list
'PS1',
'PS2'
);
lists['psv1'][1] = new Array( //These are the values you want to pass on from the second list
'ps1',
'ps2'
);
4. Write the second sets of javascripts having functions like:
emptyList, fillList and changeList
function emptyList( box ) {
while ( box.options.length ) box.options[0] = null;
}
function fillList( box, arr ) {
for ( i = 0; i < arr[0].length; i++ ) {
option = new Option( arr[0][i], arr[1][i] );
box.options[box.length] = option;
}
box.selectedIndex=0;
}
function changeList( box ) {
list = lists[box.options[box.selectedIndex].value];
emptyList( box.form.reads ); // Here notice I have given name 'reads' for the form object
fillList( box.form.reads, list ); // that is the name tag on the select object in html for the second list
}
</script>
5. Now add the following to the body tag of your html page:
<body onload="changeList(document.forms['nextgen'].reference)"> // Here 'nextgen' is the name of the form. Notice, I add this trigger when the form gets loaded to execute changeList().
The page will be fine at this stage, only problem is you have to refresh it after making a select on the first select drop down. If you don't want that do this last thing:
6. Write the following on the first select tag:
<select name="reference" size=1 onchange="changeList(this)">
In case, you want to be able to select multiple values from a select list(by shift + ctrl), go ahead and add the following to your second select tab:
<select name="reads" size=N multiple width=M>
Enjoy with javascript!
