Chapter 6: Beginning JavaScript
Controlling Data Entry Using Form Fields
Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2
You are here: irt.org | Articles | JavaScript | Form | Dynamic Dropdown Menus [ previous next ]
Published on: Saturday 27th September 1997 By: Martin Webb
Unlike the previous articles, Dropdown Menus #3, Dropdown Menus 2 and Dropdown Menus, this article will attempt to describe a method whereby one dropdown menu will effect the contents of another dropdown menu, for ALL JavaScript enabled browsers.
The most simplist, and possibly most efficient, relies on the use of frames. When an option of one dropdown menu in one frame is chosen, then the other frame is reloaded to display a different second dropdown menu.
The hierarchy of the first example described here looks like this:
|
The source code for the frame.htm defines two frames: which and what:
<HTML>
<HEAD><SCRIPT LANGUAGE="JavaScript"><!--
var artist = 'Chris Rea';
//--></SCRIPT><\/HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="which.htm" NAME="which" FRAMEBORDER=0 BORDER=0>
<FRAME SRC="what.htm" NAME="what" FRAMEBORDER=0 BORDER=0>
</FRAMESET>
</HTML>The source code for the which.htm file, controls the value held within the artist variable in the parent frame. When the artists forms 'Go' button is clicked, the onSubmit event handler invokes the reshow() function passing a complete reference to the artist dropdown menu in the artists form in the current document.
The reshow() function changes the value of the parent frames artist variable to the value of the currently selected options text value. It then refreshes the contents of the what frame.
<HTML>
<HEAD><SCRIPT LANGUAGE="JavaScript"><!--
function reshow(object) {
parent.artist = object.options[object.selectedIndex].text;
parent.what.location.href = 'what.htm';
return false;
}
//--></SCRIPT><\/HEAD>
<BODY><CENTER>
<B>Select an Artist</B>
<FORM NAME="artists" onSubmit="return reshow(document.artists.artist)">
<SELECT NAME="artist">
<OPTION>Chris Rea
<OPTION>Annie Lennox
<OPTION>Dina Carrol
</SELECT> <INPUT TYPE="SUBMIT" VALUE="Go">
</FORM>
<SCRIPT LANGUAGE="JavaScript"><!--
parent.artist = document.artists.artist.options[0].text;
//--></SCRIPT>
</CENTER></BODY></HTML>The source code for the what.htm file controls what is displayed within the what frame. Initially the artist variable in the parent frame holds 'Chris Rea', which is used to display an appropriate dropdown menu using the showlinks() and opt() functions to build the menu using JavaScript.
If the value of the artist variable were to change and then the frame reloaded, then a different menu would be generated.
<HTML>
<HEAD><SCRIPT LANGUAGE = "JavaScript"><!--
function showlinks() {
if (artist == 'Chris Rea') {
opt('cr/one.zip','The Road To Hell');
opt('cr/two.zip','Let\'s Dance');
}
if (artist == 'Annie Lennox') {
opt('al/why.zip','Why');
opt('al/wobg.zip','Walking on Broken Glass');
}
if (artist == 'Dina Carrol') {
opt('dc/track1.zip','Escaping');
opt('dc/track2.zip','Only Human');
}
}
function opt(href,text) {
document.write('<OPTION VALUE="',href,'">',text,'<\/OPTION>');
}
function load(object) {
window.location.href = object.options[object.selectedIndex].value;
return false;
}
var artist = parent.artist;
//--></SCRIPT><\/HEAD>
<BODY><CENTER>
<B>Select a track</B>
<FORM NAME="track" onSubmit="return load(document.track.names)">
<SELECT NAME="names">
<SCRIPT LANGUAGE="JavaScript">showlinks();</SCRIPT>
</SELECT> <INPUT TYPE="SUBMIT" VALUE="Go">
</FORM>
</CENTER></BODY></HTML>For Netscape 3.+ and Microsoft Internet Explorer 4.+ we can dynamically alter the contents of another dropdown menu without resorting to frames.
For Microsoft Internet Explorer 3.+ we can almost do the same thing but using floating frames.
The hierarchy of this next example is subtly different:
|
Note, we can reuse the what.htm source code without making any changes to it.
The source code for the who.htm file displays the artist dropdown menu within the artists form, followed either by a floating IFRAME for Microsoft Internet Explorer version 3.+, or, by the intitial names dropdown menu within the track form using another copy of the showlinks() function, and an amended opt() function.
The opt() function used here, either displays the normal entry when creating the initial form, or, when reloading the form it builds up the dropdown menu again, by creating new Option entries, which are then added onto the end of the options[] array using the length of the existing array.
Before the dropdown menu is reloaded, it is first wiped clean in the reshow() function which is invoked by the onSubmit event handler of the artists form.
The reshow() function either reloads the floating frame using frames[0], i.e. the first frame within the current document, or, it cycles around each of the entries in the options[] array seeting them to null.
<HTML>
<HEAD><SCRIPT LANGUAGE="JavaScript"><!--
function reshow(object) {
artist = object.options[object.selectedIndex].text;
if (msie) window.document.frames[0].location.href = 'what.htm';
else {
for (var i = document.track.names.length;i > 0;i--)
document.track.names.options[0] = null;
reloading = true;
showlinks();
document.track.names.options[0].selected = true;
}
return false;
}
function load(object) {
window.location.href = object.options[object.selectedIndex].value;
return false;
}
function showlinks() {
if (artist == 'Chris Rea') {
opt('cr/one.zip','The Road To Hell');
opt('cr/two.zip','Let\'s Dance');
}
if (artist == 'Annie Lennox') {
opt('al/why.zip','Why');
opt('al/wobg.zip','Walking on Broken Glass');
}
if (artist == 'Dina Carrol') {
opt('dc/track1.zip','Escaping');
opt('dc/track2.zip','Only Human');
}
}
function opt(href,text) {
if (reloading) {
var optionName = new Option(text, href, false, false)
var length = document.track.names.length;
document.track.names.options[length] = optionName;
}
else
document.write('<OPTION VALUE="',href,'">',text,'<\/OPTION>');
}
//--></SCRIPT><\/HEAD>
<BODY><CENTER>
<B>Select an Artist</B>
<FORM NAME="artists" onSubmit="return reshow(document.artists.artist)">
<SELECT NAME="artist">
<OPTION>Chris Rea
<OPTION>Annie Lennox
<OPTION>Dina Carrol
</SELECT>
<INPUT TYPE="SUBMIT" VALUE="Go">
</FORM>
<SCRIPT LANGUAGE="JavaScript"><!--
var reloading = false;
var artist = document.artists.artist.options[0].text;
if (navigator.appVersion.indexOf('MSIE 3') != -1)
var msie = true;
else
var msie = false;
if (msie) {
document.write('<IFRAME FRAMEBORDER=0 SCROLLING=NO SRC="what.htm"' +
'WIDTH="100%" HEIGHT="100">');
document.write('<\/IFRAME>');
}
else {
document.write('<B>Select a track<\/B>');
document.write('<FORM NAME="track"' +
'onSubmit="return load(document.track.names)">');
document.write('<SELECT NAME="names">');
showlinks();
document.write('<\/SELECT>');
document.write('<INPUT TYPE="SUBMIT" VALUE="Go">');
document.write('<\/FORM>');
}
//--></SCRIPT>
</CENTER></BODY></HTML>Finally, to bring it all together, we must allow for Netscape 2.+, which does not support the dynamic changing of dropdown menus. By checking the current browser and version, we can direct the visitor to the correct version of the script, i.e. the frame version, or the dynamic version:
<SCRIPT LANGUAGE="JavaScript"><!--
if ((navigator.appName == 'Netscape') &&
(parseInt(navigator.appVersion) == 2))
document.write('<A HREF="frame.htm">Frame version<\/A>');
else
document.write('<A HREF="who.htm">Dynamic version<\/A>');
//--></SCRIPT>Chapter 6: Beginning JavaScript
Controlling Data Entry Using Form Fields
Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2