Linking to Other Pages via a Drop Down Selection Box

Once you get lots of pages on your web site, providing links to all of the pages starts to take up a lot of space on the screen. Eventually, you start looking for a method of placing lots of links onto the screen in such a way that the links only appear when the person viewing the page wants to select one. A drop down selection box provides a method of choosing between lots of options while only using up as much space as a single option except while a selection is being made. Here is a simple drop down selection box that allows you to choose a colour.

The code to create this selection box is as follows:

 <form name="example1"><div class="centre">
<select name="select1" size="1">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select></div></form>

The form and div tags define this as a form that will be centred on the page. The select tag defines the drop down list box. Size=1 makes the box display only one entry unless the list is opened up to make a selection. Each option tag defines one of the options to display in the list. A selection is made from the list by clicking on the down arrow at the right hand end of the box and then clicking on the option that you want to select.

By default, the first item in the list is the one that appears when the list is first displayed. To specify a different option as the default you just add selected="selected" within the option tag of the entry that you want to be the default. For example

 <option selected="selected">Blue</option>

So now we know how to create a drop down list but how do we make it so that the list will act as a series of links to other pages on your site?

Well the first thing that we need to do is to specify the page to which each entry in the list will link to. We do this by adding a value="pagex.html" to each option tag identifying the name of the page that each individual option is to link to. The information to be supplied here is exactly the same as you would supply in the href= of a conventional link.

The next thing that we need to do is to add method="POST" to the form tag so that the form can perform an appropriate action when submitted. We have already given both the form and the drop down box their own names so that we will be able to refer to them when performing that action.

The last thing we need to add in a method of telling the form when to perform an action and what action to perform. The easiest way to do this is to add a button to our form. When the button is clicked the visitor will be transferred to their selected page. We can either link to a server side script or use a small piece of javascript code to actually perform the transfer to the new page. Let's look at another drop down list that has all of this additional code added to it.

The code to create this selection box is as follows with the additional code that we added to convert this from a static selection list like the one in the first example into this fully functional page link selection shown in bold first using a server side PHP script:

 <form name="ex2" action="xfer.php" method="POST"><div class="centre">
<select name="xfer" size="1">
<option value="net1.htm">Browsers</option>
<option value="net2.htm">HTML</option>
<option value="net3.htm">Javascript</option>
</select>
<input type="submit" value="Go!" />
</div></form>

To get this version to work requires that the server support a scripting language such as PHP. In this case the PHP script used is called xfer.php and contains the following code which gets the value posted by the drop down list in the form and loads that page:

<?
$xfer = $_POST['xfer'];
header("location: $xfer");
?>

Where the server supports a different language you can create the equivalent of this code in that language. Alternatively, if the server hosting your site doesn't support server side scripts then you can use Javascript by coding as follows:

 <form name="ex2" method="POST"><div class="centre">
<select name="xfer" size="1">
<option value="net1.htm">Browsers</option>
<option value="net2.htm">HTML</option>
<option value="net3.htm">Javascript</option>
</select>
<input type="button"
onclick="location = ''+document.ex2.xfer.options[document.ex2.xfer.selectedIndex].value;"
value="Go!" />

</div></form>

Note that the input tag must either all go on one line or be broken only in the places shown. Breaking the onclick statement within the tag onto multiple lines will break the functionality of your code.

You will also note that the onclick statement contains several references to the names that we gave to the form and the selection box. document.ex2 is the name that we need to use to refer to this specific form. document.ex2.xfer refers to the selection box within this form. In this instance we have given the selection box a different name in this form to the name that we gave the selection box in the first form but had we given them both the same name we could still have distinguished between then because the forms that they are in have different names.

document.ex2.xfer.selectedIndex is the numerical value corresponding to the entry within the drop down box that was selected and so document.ex2.xfer.options[document.ex2.xfer.selectedIndex] is the way that we can refer to the selected entry within the drop down box. In this instance we want the value of that selected entry to be assigned to location. Assigning a new value to the location field is the method used to transfer to the selected page using javascript code.

With Javascript you can even get rid of the button and have the transfer take place immediately when an entry is selected from the drop down list. To do this we attach the code to the select tag instead of to a separate button and use onmouseup instead of onclick to ensure that the transfer does not take place too soon. Since this code is on the select itself we can simplify our references from document.ex2.xfer.selectedIndex to this.selectedIndex. Note that this means that a transfer to the selected page will always take place when someone opens the list to see what it contains, they can't decide not to transfer. The code for this is as follows:

<form name="ex2" method="POST"><div class="centre">
<select name="xfer" size="1" onmouseup= "location = '' + this.options[this.selectedIndex ].value;">
<option value="net1.htm">Browsers</option>
<option value="net2.htm">HTML</option>
<option value="net3.htm">Javascript</option>
</select>
</div></form>

Of course the Javascript options will only actually work when your visitor has javascript enabled so you might want to include the entire code within javascript document.write statements so that the non-functional drop down does not appear when javascript is not enabled. Alternatively we can combine the javascript and PHP versions to give a version that works on all browsers but only displays the button on browsers without javascript. The code to do this is as follows:

<form name="ex3" action="xfer.php" method="POST"><div class="centre">
<select name="xfer" size="1" onmouseup= "location = '' + this.options[this.selectedIndex ].value;">
<option value="net1.htm">Browsers</option>
<option value="net2.htm">HTML</option>
<option value="net3.htm">Javascript</option>
</select>
<noscript><input type="submit" value="Go!" /></noscript>
</div></form>

Now all we need to do in order to place as many page links within this single drop down box is to add extra option statements for each page that we want to link to. If the open list becomes too long to be able to display properly on the screen then a scroll bar will be automatically added so that the visitor can scroll through your list of links to find the one that they want.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate