Partager via

Creating a drop-down list that links to other pages

  • Article

You've seen them.  All the big Web sites have them.  Now you want one, too.  Perhaps you have localized sites and you want a cover page with a drop-down that lists the different languages into which your Web site is translated so that visitors can select the language they want to view.  Maybe you want to use a drop-down for navigation for your site or to allow site visitors to access online search engines.  There could be any number of reasons why you want to do it.  Or maybe there's no reason at all.  You just want to know how to do it because you think it looks cool.

There are two types of drop-down lists that hyperlink to other pages:  one, the page changes when the selection changes; two, the page changes when the visitor clicks a button.  I'm going to give you JavaScript code to do both of these, but there is of course, one limitation.  As always, if the user has JavaScript disabled, then the simple examples that I provide here won't work.  In this case, you could use ASP, ASP.NET, or another server-side processing technology to provide this functionality.

Page changes when the selection changes

Creating a dropdown that causes a new page to open when the selection changes is fairly simple to do.  The user doesn't have to do anything except select the item from the drop-down and the page opens.  I used the open method, but you could also use the navigate method.

Here's the script:

 <script>
 function goToPage(url)
 {
 if (url != "")
 {
 .open(url);
 }
 }
</script>

And here's the dropdown.  Note that the form tag is necessary for the script to function properly.

 <form>
 <label><u>S</u>earch Engines</label>
 <select accesskey="S" onchange="goToPage(this.options(this.selectedIndex).value)">
 <option selected>Please select one</option>
 <option value="https://search.msn.com/">MSN Search</option>
 <option value="https://www.google.com/">Google</option>
 <option value="https://www.search.com/">Search.com</option>
 <option value="https://www.dogpile.com/">Dogpile</option>
 </select>
form>

Page changes when the user click a button

Creating a dropdown that uses a Go button is just as simple. When the user has selected the item they want from the dropdown, they just click Go, and the new page opens. I used the open method for this script also, but you could use the navigate method here as well.

Here's the script:

 <script>
function goToNewPage(dropdownlist)
 {
 var url = dropdownlist.options(dropdownlist.selectedIndex).value;
 if (url != "")
 {
 window.open(url);
 }
 }
</script>

And here's the dropdown. Note that the form tag is necessary for the script to function properly.

 <form name="dropdown">
 <label>Search <u>E</u>ngines</label>
 <select name="list" accesskey="E">
 <option selected>Please select one</option>
 <option value="https://search.msn.com/">MSN Search</option>
 <option value="https://www.google.com/">Google</option>
 <option value="https://www.search.com/">Search.com</option>
 <option value="https://www.dogpile.com/">Dogpile</option>
 <select>
 <input type=button value="Go" onclick="goToNewPage(document.dropdown.list)">
</form>

In order to use this code, all you need to do is copy the code above, switch to Code view in FrontPage, and paste it into your page.  Once you do this, change text displayed and the value attribute for each option in the SELECT element.  The value attributes should contain a valid URL including the "https://".  Place the script code in the HEAD section of your page, and place the form with the SELECT element anywhere on the page where you want it to appear.  You can have more than one form on a page.  Just don't nest this FORM element inside of another FORM element.  If you do so, you will likely experience problems.

What's the difference?

The only differences between the two examples above are the location of the event that calls the script (which in the first is in the onchange event for the SELECT element, and in the second is in the onclick event for the Go button) and the way the SELECT element is accessed (which for the first example is accessed by using the this keyword, and for the second is accessed using the name attributes for the FORM and SELECT elements).

Comments

  • Anonymous
    August 19, 2004
    It is nice to see that you inserted an accesskey into your example, but I'd suggest some more improvements:
    * Make the form go somewhere like a JavaScript required page.
    * Provide a <noscript> section that lists the links normally
    * Make the "Please select one" option disabled.
    * Additionally, because an access key has semantics, it would be better to use <div class="accesskey"> instead of <u>.
    * Instead of putting the accesskey on the select control, put the accesskey on the label and add a for= attribute to it that gives the id= attribute value you used on the select control.
  • Anonymous
    August 20, 2004
    The comment has been removed
  • Anonymous
    September 07, 2004
    Thanks EROL www.mysps.info
  • Anonymous
    May 30, 2005
    The comment has been removed
  • Anonymous
    July 26, 2005
    The comment has been removed
  • Anonymous
    February 07, 2006
    <select name="choice" size="1" onChange="jump(this.form); this.selectedIndex=0;">
  • Anonymous
    February 28, 2006
    Can someone please help.  I am making a website for the first time and what to make a dropdown menu.

    from my home page, which links to other pages.  The Text which would be the hyperlink is: Photos.

    Do I need to make this a hyper link first then add a drop down menu to this.  Can someone please explain in very simple terms, as hyperlinks etc are new to me.
  • Anonymous
    March 28, 2006
    Mr. Roy D. Carlso's code is great.  I am an absolute novice with little or not background and it works for me. QUESTION:  How do I adust the font style and size as well as the length of the dropbox with this code?

    Thanks

    jb@instimeet.com
  • Anonymous
    April 03, 2006
    i  am a learner trying to create a public message board for site visitors to express their views on issues affecting their lives. what i want is just like this message board..

    could anybody help me how to do that, please...

    regards
    sw
    sw

  • Anonymous
    April 16, 2006
    I'm using a dropdownlist form on my web page.  I want to have the user just click on a selection (major catagory) and a drop down list appears.  I do not want the dropdown arrow in the form control to show.   Is there a way to hide the dropdown arrow in the web form?

    Thanks in advance.
  • Anonymous
    May 06, 2006
    I use a dropdownlist for my web jukebox.
    However the selector only works in Internet Explorer.
    I use 2 lines of javascript.
    But think that a few more lines are needed to let it work in all browsers.

    Who knows a (simple) solution?

    Many thanks, Jan Helderman | Fabc.info

    Mail: info@fabc.info
  • Anonymous
    May 13, 2006
    I would like to create a drop-down list with links to a frame (type main6). I'm using a FrontPage
    Please answer me to my email
    edwardjr@ibest.com.br
  • Anonymous
    May 31, 2006
    Roy D,
    Did you ever get an answer to how to have "Select" reselect itself automatically?  I'm trying to do something similar.
    Thanks,
    Natalie
  • Anonymous
    June 16, 2006
    I need to create a language drop downlist so that whenever i select a language  it show diaplay the page in that particular language.How is it possible.Can anbody give a help on this.

     
  • Anonymous
    June 21, 2006
    Very Very nice information here... Thanks
  • Anonymous
    June 22, 2006
    Perfect pages... tnx
  • Anonymous
    June 27, 2006
    This may be a dumb question, but with all of its supposed "sophistication", why aren't Drop-down Menus a feature of FrontPage? Why can't I just add one like any other nav feature?
  • Anonymous
    June 29, 2006
    beautiful online information center. greatest work... thanks
  • Anonymous
    July 03, 2006
    I love this site. Good work...
  • Anonymous
    July 05, 2006
    perfect site good information, very nice news and etc... tnx
  • Anonymous
    July 09, 2006
    I love this site. Good work...
  • Anonymous
    July 09, 2006
    perfect site good information, very nice news and etc... tnx
  • Anonymous
    July 09, 2006
    Nice site. Thank to work...
  • Anonymous
    July 12, 2006
    Not very innovative.

    The code you posted also has some typos.
  • Anonymous
    July 13, 2006
    Great job guys...
  • Anonymous
    July 13, 2006
    I'm love this great website. Many thanks guy
  • Anonymous
    July 14, 2006
    Great job guys... Thank for you work...
  • Anonymous
    July 22, 2006
    looking for information and found it at this great site. <a href=""></a> <a href="http://tonerlasertonersuppl.sky.prohosting.com/hp-toner-cartridge-dfw.html">hp toner cartridges</a> <a href="http://tonerbulktoner4lbott.balder.prohosting.com/dell-1700-bulk-toner.html">bulk toner 4l bottle</a>
  • Anonymous
    July 23, 2006
    The comment has been removed
  • Anonymous
    July 31, 2006
    Question -
    We have a drop down window to hyperlink to other pages on our web site and some of us can't access it (most can). When they click on the hyperlink nothing happens.

    Can you help me out?
    Krys
    omslw@yahoo.com
  • Anonymous
    September 13, 2006
    The comment has been removed