Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2004
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple Independant Dropdown Menus

    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

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    ***********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)">.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That was a very concise explanation Roy...
    FWIW: This question was also answered here....
    (not near as concise but answered nevertheless)

    .....Willy

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).
    Check out the Forum Search. It's the short path to getting great results from this forum.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •