Selection Box

You can create a selection box in JavaScript that allows the user to select a certain category of items, in this example, books. In this example, we create a function called loadHtml) to load a web page from a selection list. As this selection list is situated in a form, we need to add the parameter form in the aforementioned function, loadHtml(form). In the script, we use the if keyword to load a particular web page selected by the user. The syntax is

if (form.list.selectedIndex==n) location="abc.html"

*The object list is a selection box and the selectedIndex(n) property indicates the position of the item in the selection box. The location property points to a particular web page.

The Script

<SCRIPT LANGUAGE="JavaScript">

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>

We use the Select keyword to create the list box, as follows:

<SELECT NAME="list" 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>

*the size indicates the number of items to be displayed. Finally, we need to create a button to allow the user to select an item. The syntax is as follows:

<Input TYPE="button" NAME="button" Value="OK" onClick="loadHtml(this.form)">

---

---