dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Javascript/Jump Menu Help needed

  1. #1
    Join Date
    Sep 2009
    Posts
    2

    Javascript/Jump Menu Help needed

    Hi there,

    I am very new to Javascript. Im trying to get a form to work in such a way that once one clicks on an option under a certain drop down menu that, without refreshing the page or submitting anything, another jump menu pops up.

    Each selection has a different pop up menu.

    Here is my code so far. It works once you click on a button, but i cannot get it to work with a jump menu.

    Hope I have made sense.

    <script type="text/javascript" language="javascript">
    function toggleMe(id)
    {
    var element = document.getElementById(id);
    if(element.style.display == "none")
    {
    element.style.display = "block";
    }
    else
    {
    element.style.display = "none";
    }
    }
    </script>

    </head>
    <body>

    <div>
    <p>
    <input type="button" onClick="toggleMe('toggleHolmes');" value="Click to toggle"/>
    </p>
    <p id="toggleHolmes" style="display:none;">
    <select name="menu2" onChange="MM_jumpMenu('parent',this,0)">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    </select>
    </p>
    </div>

    </body>
    So instead of the button I want to replace that with a jump menu. How do I do that?

  2. #2
    Join Date
    Aug 2009
    Posts
    17
    you can achieve that by adding and id to <p id='theid'>
    <input type="button" onClick="toggleMe('toggleHolmes');" value="Click to toggle"/>
    </p>
    , that is if you only want to replace this to a new menu
    i.e.
    function MM_jumpMenu(value) {
    var theid = document.getElementById('theid');
    switch(value) {
    case "option1_menu":
    theid.innerHTML = "YOUR NE MENU HERE";
    break;
    case "option2_menu":
    theid.innerHTML = "YOUR MENU 2 HERE";
    break;
    ....so on.........//continue the pattern until the number of option reached to end
    default:
    theid.innerHTML = "THE DEFAULT VALUE(this can be the toggle button you first displayed)";
    break;
    }
    return;
    }

    //try out
    Last edited by nazzy; 09-01-2009 at 10:21 AM.

  3. #3
    Join Date
    Sep 2009
    Posts
    2
    Thanks for your help,

    unfortunately im not quite coming right.

    Here is what I did:

    <script language="JavaScript" type="text/JavaScript">
    function MM_jumpMenu(value) {
    var theid = document.getElementById('theid');
    switch(value) {
    case "option1_menu":
    theid.innerHTML = "YOUR NE MENU HERE";
    break;
    case "option2_menu":
    theid.innerHTML = "YOUR MENU 2 HERE";
    break;
    ....so on.........//continue the pattern until the number of option reached to end
    default:
    theid.innerHTML = "THE DEFAULT VALUE(this can be the toggle button you first displayed)";
    break;
    }
    return;
    }
    </script>

    </head>

    <body>
    <div>
    <p id='theid'>
    <input type="button" onClick="toggleMe('toggleHolmes');" value="Click to toggle"/>
    </p>
    <p id="toggleHolmes" style="display:none;">
    <select name="menu2" onChange="MM_jumpMenu('parent',this,0)">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    </select>
    </p>
    </div>

    Where did I go wrong?

  4. #4
    Join Date
    Aug 2009
    Posts
    17
    i did not meant for you to copy the code i gave, your supposed to include the data on the code.

    your supposed to change the following:

    case "option1_menu": to the actual value of your option on your select element.
    example:
    if your first option contains "value1" as value, the option1_menu will be value1 and so on and so forth until all the value on your select element will be included in your switch statement.
    theid.innerHTML ? your supposed to change the content to the content you wish to add to your options
    example:
    theid.innerHTML = "hello i am option 1 content"; or additional menu like you said you want to add "<input type='button' value='menu1' /> <input type='button' value='menu2' />"; and so on.
    note: the content is where you put the additional information/ menu/ images/ or anything you wish to add. you can use plain text, with or without html element tags. your choice

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles