Page 1 of 1

HTML dropdown lists with items that go to a URL.

Posted: Mon Jun 16, 2003 11:01 am
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.)