Web Hosting by Netfirms | Free Domain Names by Netfirms

Checking the selected value of a select object

A select object is made with the normal html select tag in JavaScript it's called a select object. If you know how to check the index of a select object you can ensure the user choices at least one option or you can perform some type of dynamic action depending on what option they selected.

The following example is going to show you how to check the selected index of a select object and then redirect the user to the option they selected as soon as they select it. The options in the select are:

Choose one
Sun's Java
Apache
CoolText
JShortcut.com

If the user choices the first one nothing will happen since the first option is not a URL but is there to convene the user to choose one of the other four options. As with normal options in a select tag they each have a value property. In this case the value property holds the URL of the particular web site but without the "http:// " protocol. The protocol is added to the start of the web address just before they are redirected to the chosen web site. The redirection process is triggered just after the user changes the current option to a different one. Run Code | View Code

Process

Getting the index of the selected option - selectedIndex property of a select object
Ensuring the first option is not selected - The selectedIndex is not equal to "0"
Get the selected option's value - Access the select's option array and extract the option that the user chose at the position of the selectedIndex and finally get it's value property.
Set the protocol - Insert the protocol "http://" at the beginning of the chosen web site
Send the user to the chosen web site - set the location property of the window object to the formatted web site address.
Function: setLocation

Events

The user changes the selected option - The onChange event of the select object

Input

The human readable web site names the user can see as normal html beside each option
The values of the option objects in the select tag
The "http://" string inserted at the beginning of the web site address

Event Trigger

The onChnage event of the select object will call the setLocation function

The Solution

Define the select element in a form

Open the form and give it a name <form name="myForm">

Define the select container and give it a name <select name="myUrlList"> Register the onChange event <select name="myUrlList" onchange=""> Make the onChange event call the setLocation function <select name="myUrlList" onchange="setLocation()">

Define the options the user can select. Make the first one selected with no value <option selected>Choose one Define the other options and set their value to a valid web site address without the "http://" protocol and provide an explanation for the value beside the option. <option value="java.sun.com">Sun's Java <option value="Apache.org">Apache <option value="CoolText.com">CoolText <option value="JShortcut.com">JavaScript Shortcuts

Close the select and the form </select>

</form>

setLocation

Function analysys

This function's purpose is to load the chosen web site into the window.

This function first declares three local variables protocol, listReference and selectedIndex. The protocol is assigned the "http://" value (All these web sites use this protocol) straight away which will be inserted at the beginning of the chosen web site as the protocol. ListReference is used as a reference to the select object. SelectedIndex is set to the selected index of the listReference pointer.

After the local variables are set the function then checks if the selected index is "0" if it is it means the user chose the first option in the select which does not provide a valid URL so the function doesn't do anything. Otherwise the selected index must be between "1" and "3" which means the user choices a valid web address. If this is the case it declares another local variable "optionValue" which is assigned the value of the selected option. It does this by accesing listReference's option array. (This array contains all options of the select and is named options) and getting the option out of the option array at the index the user chose using selectedIndex.

Finally the window's location property is set to the protocol variable with the web site address attached to the end of the string. The window's location then changes to the chosen web address.

Comments with code

function setLocation(){

The protocol for the host var protocol = "http://"; Get a reference to the select var listReference = document.myForm.myUrlList Get the selected index var selectedIndex = listReference.selectedIndex If the selected index is not the first option in the select if(selectedIndex != 0){

Declare a variable to hold the value of the selected option's value var optionValue Get the value from the select by using the listReference and accessing it's options array and getting the option of the array the user chose. optionValue = listReference.options[selectedIndex].value Change the location of the window to the web adress using the "http://" protocol window.location = protocol + optionValue

}

Important

Checking if no option is selected
If the sleectedIndex property is -1 it means nothing is selected
Option objects
Every option in the options array is an object and it's properties can be changed.
1. An option can be removed from a select object
2. A new option object can be created and added to the select object

Run Code | View Code

JavaScript Tutorial Home