...

View Full Version : Multiple Independant Dropdown Menus



obaluba
08-12-2004, 02:45 PM
Hi, :)
I have a script for a javascript dropdown menu. What I want to do is have 4 menus operating independantly of each other on the page. I have almost managed this however when i click on the top one it links me to the root directory and if i go select any item in the lower one it links perfectly to the item as it should. Its like the lower menu is conflicting with the top one.

If i remove either of the menus they both link perfectly to the pages they should do...I know its something small!!

the code is as follows:

***********Upper dropdown menu:*********** (1st .js file)
function jumpBox(form1){
var URL = document.form1.site1.options[document.form1.site1.selectedIndex].value;
window.location.href = URL;
}

document.write('<form name="form1">');
document.write('<SELECT NAME="site1" size=1 onChange="java script:jumpBox()">');
document.write('<option value="">Applications');
document.write('<option value="http://www.yahoo.com">Yahoo');
document.write('<option value="http://www.webcrawler.com">Webcrawler');
document.write('</select>');
document.write('</form>');

***********Lower Dropdown Menu*********** (2nd .js file)
function jumpBox(form1){
var URL = document.form2.site2.options[document.form2.site2.selectedIndex].value;
window.location.href = URL;
}

document.write('<form name="form2">');
document.write('<SELECT NAME="site2" size=1 onChange="java script:jumpBox()">');
document.write('<option value="">Site Sub Sections');
document.write('<option value="http://www.metacrawler.com">Metacrawler');
document.write('<option value="http://www.altavista.digital.com">Altavista');
document.write('</select>');
document.write('</form>');


I think this is a very simple thing, just something im missing.

The HTML page that these JS files are being linked from is:

<html>
<body>

Applications: <script language="JavaScript" src="apps.js"></script>

Site Subsections: <script language="JavaScript" src="sitesubsect.js"></script>

<body>
</html>

I would really appreciate any help or input anyone has on this

thanks in advance

Roy Sinclair
08-12-2004, 03:41 PM
***********Generic menu code:*********** (1st .js file)
function jumpBox(selectBox){
var URL = selectBox.options[selectBox.selectedIndex].value;
if URL <> "" window.location.href = URL;
}

***********Upper dropdown menu:*********** (2nd .js file)
document.write('<form name="form1">');
document.write('<SELECT NAME="site1" size="1" onchange="jumpBox(this)">');
document.write('<option value="">Applications');
document.write('<option value="http://www.yahoo.com">Yahoo');
document.write('<option value="http://www.webcrawler.com">Webcrawler');
document.write('</select>');
document.write('</form>');

***********Lower Dropdown Menu*********** (3rd .js file)
document.write('<form name="form2">');
document.write('<SELECT NAME="site2" size="1" onchange="jumpBox(this)">');
document.write('<option value="">Site Sub Sections');
document.write('<option value="http://www.metacrawler.com">Metacrawler');
document.write('<option value="http://www.altavista.digital.com">Altavista');
document.write('</select>');
document.write('</form>');


Notes:

The base problem is that you have non-navigational entries in those select boxes but failed to account for them in the code.

You also don't need to repeat the code for each menu, it's trivial to make it generic so one copy of the code will work for all the select menus you care to have.

The onchange event is "onchange", not "onChange". The latter usually works but some browsers may ignore it. For event handlers there's no need nor any value added by putting "javascript:" in there, that's the form needed for the href property of an anchor tag.

All properties should be quoted, even when the value is completely numeric so " size=1 " isn't strictly valid while " size="1" " is valid. This is only needed to "future-proof" your code since the browsers will accept either for now but it's a good idea to make it a habit now since future browsers may be more strict.

The "this" property is a great way to pass a reference to an object to another function which helps when you call a generic script. Using the above example: <SELECT NAME="site1" size="1" onchange="jumpBox(this)"> is the same as <SELECT NAME="site1" size="1" onchange="jumpBox(document.form1.site1)">.

Willy Duitt
08-12-2004, 03:52 PM
That was a very concise explanation Roy... :thumbsup:
FWIW: This question was also answered here (http://www.webdeveloper.com/forum/showthread.php?s=&threadid=41607)....
(not near as concise but answered nevertheless)

.....Willy

Roy Sinclair
08-13-2004, 04:50 PM
But they did mention the one thing I didn't catch which was two copies of a script with the same name. I "fixed" it by making the generic function but I didn't catch it as part of the original problem(s).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum