Drop Down List and Link List

With this tweak I will teach you about making a drop down list and link list with the use of the HTML <select> and <option> tag.

How do I make a drop down list?

The syntax for making a drop down list is as followed.

<select>
  <option>Erik</option>
  <option>John</option>
  <option>Mike</option>
  <option>Bob</option>
</select>

The Select tag defines a drop down list therefore rendering the option tags.
The Option tag declares a option to select from in a drop down list.

The code above renders the list below.
Erik John Mike Bob

We can even add in a style attribute to control the size of the list.

<select style="width: 300px;">
  <option>Erik</option>
  <option>John</option>
  <option>Mike</option>
  <option>Bob</option>
</select>

The code above renders the list below
Erik John Mike Bob

On its own its really quite useless.

Most option list are best used with JavaScript or PHP to direct it to a server as a action of the input value. You will most commonly see this used in email forums or scripts with input actions. Since Blogger does not allow us to store data on their servers this code above will be useless to most of you other then learning purpose.

So lets turn it into something that will be useful for everyone.

How do I make a drop down link list?

To make a drop down link list we will need to use the value attribute with a little bit of JavaScript.

The syntax is as followed.

<select onChange="location.href=this.options[this.selectedIndex].value;">
<option>List Name</option>
<option value="URL">Chapter 01</option>
<option value="URL">Chapter 02</option>
<option value="URL">Chapter 03</option>

The Value attribute give a value to the option text. In this case the value is a link which the JavaScipt code activates the link (URL) when the option is selected. 

To use this on your site just replace the following.

Red text is the URL you want the option to change to when selected.
Blue text is the name you want to display when not in use.
Green text is the title of the options in the list.

The code above renders this list below

List Name Chapter 01 Chapter 02 Chapter 03

We can also add a size attribute to this code as well.

The syntax for this is as followed.

<select width: 300px; onChange="location.href=this.options[this.selectedIndex].value;">
<option>List Name</option>
<option value="URL">Chapter 01</option>
<option value="URL">Chapter 02</option>
<option value="URL">Chapter 03</option>

Orange text is the width of the list.

The code above renders the list below.
List Name Chapter 01 Chapter 02 Chapter 03