Lesson 21: Selection List

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

PCs Laptops Tablet Computers Mobile Phones

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

PCs Laptops Tablet Computers Mobile Phones

To check which item is selected in the listbox, we can use the selectedIndex property of the listbox object.  Besides that, we retreive the content of the list box using the getElementById method using the id="list1". In addition, we use the options method to display the text of the selected item.

Example 21.3

<script>

function testItem() {

var myselect = document.getElementById("list1");
var myitem = myselect.options[myselect.selectedIndex].text;
alert(myitem+" is selected");
}

}

</script>

You also need to Create the following selection box.

<select id="list1" SIZE="5">
<option>PC
<option>Laptop
<option>Tablet Computer

</SELECT>

<input Value="Check Item" onClick"testItem()">

The Output

PC Laptop Tablet Computer Mobile Phone

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>

The Output