Creating a drop-down list that links to other pages


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="http://search.msn.com/">MSN Search</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.search.com/">Search.com</option>
<option value="http://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="http://search.msn.com/">MSN Search</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.search.com/">Search.com</option>
<option value="http://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 "http://".  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 (31)

  1. 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.

  2. b.gr says:

    Hm, onchange should not be used for navigation purposes (see http://tom.me.uk/scripting/dropdowns.asp for an inddep discussion).

    navigate is an unnecessary limitation, when [window.]location[.href] = sUrl provides the same functionallity and is x-browser.

    PS but OT: Why is there no preview for comments on blogs.msdn.com?

  3. Dexter says:

    I am a student and I really appreciate this idea. I found the info very usefull.

    I am building a personal site and the problem i have is that; I have a drop box that links to pages on clicking the list item but I am not able to have the linked page displayed in a specific frame. Can you help ?

    My email is retxed_49@msn.com

    Thanks,

  4. Roy D Carlso says:

    This works great, but what would needed to be added to the <script> section if one wants a default option

    <option selected>Please select one</option>

    to be re-selected automatically…In other words, I want Please Select One to re-select itself AFTER I select one one of the other items (which I have set to open in a new window). How could this be accomplished? BTW, I’ve altered the code a bit:

    Here is the script section:

    <script>

    <!–

    function land(ref, target)

    {

    lowtarget=target.toLowerCase();

    if (lowtarget=="_self") {window.location=loc;}

    else {if (lowtarget=="_top") {top.location=loc;}

    else {if (lowtarget=="_blank") {window.open(loc);}

    else {if (lowtarget=="_parent") {parent.location=loc;}

    else {parent.frames[target].location=loc;};

    }}}

    }

    function jump(menu)

    {

    ref=menu.choice.options[menu.choice.selectedIndex].value;

    splitc=ref.lastIndexOf("*");

    target="";

    if (splitc!=-1)

    {loc=ref.substring(0,splitc);

    target=ref.substring(splitc+1,1000);}

    else {loc=ref; target="_self";};

    if (ref != "") {land(loc,target);}

    }

    //–>

    Here is the drop down section:

    <p align="center">

    <!–webbot bot="HTMLMarkup" startspan –><form action="dummy" method="post">

    <select name="choice" size="1" onChange="jump(this.form)">

    <option value="">Select</option>

    <option value="http://www.google.com*_blank">Google</option>

    <option value="http://www.comcast.net*_blank">Comcast</option>

    <option value="http://www.997wtn.com*_blank">99.7 WTN</option>

    <option value="http://www.radiotower.com*_blank">Radio Tower</option>

    <option value="http://www.lcms.org*_blank">LCMS Home</option>

    <option value="http://www.cune.edu*_blank">Concordia Seward</option>

    <option value="http://www.bankofamerica.com*_blank">Bank of America</option>

    <option value="http://time.manpowerdirect.com*_blank">Timeclock</option>

    <option value="file:///c:documents and settingsadministratormy documents*_blank">Documents Folder</option>

    <option value="file:///C:*_blank">My Computer</option>

    <option value="file:///C:ProgramsEmptyRecycleBin.exe*_blank">Empty Recycle Bin</option>

    <option value="file:///C:ProgramsExitWindows.exe*_blank">Restart Computer</option>

    </select>

    </form><!–webbot bot="HTMLMarkup" endspan –></p>

    I’m making an active desktop user menu. It is working great, but the only trouble is that I need "SELECT" to reselect itself automatically.

    Thanks

  5. berny says:

    <select name="choice" size="1" onChange="jump(this.form); this.selectedIndex=0;">

  6. Julie says:

    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.

  7. John Burnett says:

    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

  8. sani waya says:

    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

  9. Rich says:

    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.

  10. 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

  11. Edward says:

    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

  12. Natalie says:

    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

  13. mathew says:

    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.

     

  14. whitby says:

    Very Very nice information here… Thanks

  15. Howard says:

    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?

  16. shawn says:

    beautiful online information center. greatest work… thanks

  17. waefreleah says:

    I love this site. Good work…

  18. malvyn says:

    perfect site good information, very nice news and etc… tnx

  19. terrill says:

    I love this site. Good work…

  20. orton says:

    perfect site good information, very nice news and etc… tnx

  21. aelfric says:

    Nice site. Thank to work…

  22. Sean says:

    Not very innovative.

    The code you posted also has some typos.

  23. goodwin says:

    I’m love this great website. Many thanks guy

  24. rans says:

    Great job guys… Thank for you work…

  25. cliftun says:

    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>

  26. Krys-omslw says:

    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

  27. Doug says:

    I am trying to do this drop down box and have the selections link to a document in another directory on my site. How can I do this? In Frontpage it uses the href> folder/folder/example.doc*_blank as a link but I can’t do it with the drop downs.  Any ideas?? THANKS

    cook.dc@pg.com

Skip to main content