Lesson 21: Selection List

❮ Previous Lesson Next Lesson ❯

A selection list lets users choose an item from a list of items. For example, online shopping malls such as Amazon.com or auction sites such as ebay.com let you select categories of products from a drop-down list. In JavaScript, you can create a selection list easily using the <SELECT >tag. The <SELECT> tag creates a Listbox and the <OPTION> tags create the items inside the Listbox. The number of <OPTION> tags is unlimited. The close tag for the Listbox is </SELECT>

The Listbox can display many items together with a scroll bar. The number of items shown is specified by the SIZE attribute. If the SIZE attribute is left out, the Listbox will be displayed as a dropdown box, where only one item is shown and the user needs to click to see more items.

Example 21.1: A listbox that displays all the items at once

This JavaScript creates a listbox that displays all the items at once.

<SELECT SIZE="3">

<OPTION>PCs

<OPTION>Laptops

<OPTION>Tablet Computers
<OPTION>Mobile Phones

</SELECT>

The Output

In this example, you will see a drop-down Listbox which displays only one item. You need to click on the small arrow on the right of the Listbox to view other items.

Example 21.2: A drop-down Listbox

<SELECT>

<OPTION>PCs

<OPTION>Laptops

<OPTION>Tablet Computers
<OPTION>Mobile Phones

</SELECT>

The output

To check which item is selected in the listbox, we can use the selectedIndex property of the listbox object. Item one returns an index value of 0, follows by 1 for item2 and so forth. Note that if no item is selected, selectedIndex returns an index value of -1. In order to run the test, we need to create a JavaScript function and use it together with the FORM object. Take a look at Example 21.3:

Example 21.3

<SCRIPT>

function testItem(form) {

alert("Item "+form.mylist.selectedIndex+" is selected");

}

</SCRIPT>

You also need to Create the following selection box.

<FORM ACTION="" METHOD="GET">

<SELECT SIZE="3">

<OPTION>PCs
<OPTION>Laptops
<OPTION>Tablet Computers

</SELECT>

<INPUT Value="Check Item" onClick"testItem(this.Form)">

</FORM>

The output is shown below and you can click on the Check Item button to test. Here is another good working example using the options button in JavaScript. You can select a certain item then click OK, it will bring you to the selected page.

Example 21.4: Books Selection ListBox

The Code

<SCRIPT>
//created by Liew Voon Kiong April 24 1998 All Rights Reserved.

function loadHtml(form){
if (form.list.selectedIndex==0) location="art.html"
if (form.list.selectedIndex==1) location="astro.html"
if (form.list.selectedIndex==2) location="bestsell.html"
if (form.list.selectedIndex==3) location="business.html"
if (form.list.selectedIndex==4) location="children.html"
if (form.list.selectedIndex==5) location="computer.html"
if (form.list.selectedIndex==6) location="health.html"
if (form.list.selectedIndex==7) location="mystery.html"
if (form.list.selectedIndex==8) location="horror.html"
if (form.list.selectedIndex==9) location="nonfic.html"
if (form.list.selectedIndex==10) location="romance.html"
if (form.list.selectedIndex==11) location="science.html"
if (form.list.selectedIndex==12) location="scific.html"
if (form.list.selectedIndex==13) location="self.html"
if (form.list.selectedIndex==14) location="sports.html"
if (form.list.selectedIndex==15) location="travel.html"
if (form.list.selectedIndex==16) location="young.html"
if (form.list.selectedIndex==17) location="music.html"

}
</Script>

<FORM NAME="book" ACTION="" METHOD="GET">

<SELECT size="4">
<OPTION>Art and Drawing
<OPTION>Astronomy
<OPTION>Best Sellers
<OPTION>Business & Investment
<OPTION>Children Books
<OPTION selected>Computer & Internet
<OPTION>Health & Fitness
<OPTION>Mystery
<OPTION>Horror & Thriller
<OPTION>Non Fiction
<OPTION>Romance
<OPTION>Science & Nature
<OPTION>Science Fiction
<OPTION>Self Improvement
<OPTION>Sports & Games
<OPTION>Travel
<OPTION>Young Readers' Corner
<OPTION>Music
</SELECT><INPUT Value="OK"><font size="2">
</font>
</p>
</FORM>

Click Example 21 to see the output.

❮ Previous Lesson Next Lesson ❯