HTML dropdown lists with items that go to a URL.

Technical Q&A involving operating systems, networking, software, and hardware issues.

Moderator: jasonb

Post Reply
User avatar
jasonb
Site Administrator
Posts: 105
Joined: Tue Apr 22, 2003 1:54 pm
Location: Toronto, Canada
Contact:

HTML dropdown lists with items that go to a URL.

Post by jasonb »

This is the kind of thing you can do where you have a section of a site used for navigation and you want to select various pages that appear in another area of the screen.

Following is some example code:
<form name="jump">
Page
<select name="page" onchange="location.href=jump.page.options[selectedIndex].value">
<option selected value="Page1.html">1</option>
<option value="Page2.html">2</option>
<option value="Page3.html">3</option>
<option value="Page4.html">4</option>
</select>
</form>
This will look like:

Page [ 1 ] (Dropdown to the right of "Page".)

When an item is selected, the URL referred to in the "value" field will be loaded. The entry "selected value" is the item that is selected by default. (In this way you can have multiple pages, each of which have "themselves" as the selected value, so it appears as if the dropdown list is staying the same, and remembering the selection, while the content changes.)

If you're using frames, and want to load a URL in a specific frame, you don't need to worry about the "selected value" entry, since the navigation frame will remember its own value, and you can use "parent.content.location.href=jump.page.options[selectedIndex].value", where "content" is the name of the frame targeted.

I believe that this uses javascript, although there is no <script> definition as I'm used to here, so I'm not entirely sure. (If it does, it's a special case and it's implicit.)
Post Reply