• How Combo Link Boxes look on a web page &
• How to create combo link boxes using JavaScrip
• Properties of the options array itself
• Example

 
• How Combo Link Boxes look on a web page

•  How to create combo link boxes using JavaScript

Using Java Script they can be written as follow:

   <form name="name_form">
         <select name="name_select" size="1">
                     <option>choice1</option>
                    <option>choice2</option>
                    <option>choice3</option>
                    <option>choice4</option>
         </select>
    </form>

To access anything within this selection list, we would write:

    document . name_form . name_select

Using the above list as an example, with values added in for each element:

<form name="name_form">
              <select name="name_select" size="1">
                  <option value="1">choice1</option>
                  <option value="2">choice2</option>
                  <option value="3">choice3</option>
                  <option value="4">choice4</option>
             </select>
</form>

 JavaScript gives us access to the individual elements (choice1, choice 2, choice 3 etc) by using the options array. An array is a series of variables all with the same name, but with different index numbers. Lets assume we want to access the first element of this selection list:

document.name_form.name_select.options[0] 
    //gives us access to element "choice1"

This will give us direct access to the first element of the selection list. 

To access the third element, we would do this:

document.name_form.name_select.options[2]
     //gives us access to element "choice3"

If we want to alert the name of the first element (in this case, the  name is "choice1"):
onClick="alert(document.name_form.name_select.options[0].text)"

If we want to know the value that's associated with this element:
onClick="alert(document.name_form.name_select.options[0].value)"

• Properties of the options array itself

We know how to access each of the elements within the selection list, but only by hard-coding the index number into the script. For example, we still have no way of telling our script to alert the value of each element, depending on what he/she has selected. We will now proceed to learn how we can have scripts automatically update itself whenever a different selection is made by the user, and see some practical uses of this. 
ments of the options array, NOT the options array itself. 

Here are the properties we have used already:

Properties of the elements of the options array:
 

properties text value

description returns the actual text (name) of the element returns the value of the element

Properties of the options array itself:

properties length selectedIndex

description tells us the number of elements within this selection  list tells us the index number of the selected option

Using the above table, to use the properties, we would do the following:

                 document.formname.selectionname.options.property

Using the length property, we can see how many elements are in the selection list:

                alert(document.name_form.name_select.options.length)

It alerts "3", since there are three elements in the list.

The selectedIndex property informs the index number of the element selected, and updates itself whenever a new selection is made.

Make a selection: 

onClick="alert(document.name_form.name_select.options.selectedIndex)"

                 The selectedIndex property updates itself if you change elements, so if you had selected "choice1", it alerts "0" (since array indexes start at 0), if you than changed and selected "choice2", it will alert "1" instead. 

A common use of the above knowledge is to create a combo link box, where the selection list acts as a URL jumper. To access the individual elements, we would write:

                 document.name_form.name_select.options[x]

where "x" is the index number of the element. 

Also recall from what we've just mentioned, that the selectedIndex property of the options array returns the index of the element that's currently selected:
                  document.name_form.name_select.options.selectedIndex

Now, with the above two pieces of code, we are all set to make our combobox script! 

<form name="name_form"> 
     <select name="name_select" size="1"> 
          <option value="http://www.cnet.com">choice1</option> 
          <option value="http://www.cnn.com">choice2</option> 
          <option value="http://www.geocities.com">choice3</option> 
     </select> 
<script language="javascript"> 
<!-- 
function name_function() 
{ 
location=document.name_form.name_select.options[document.name_form.name_select.selectedIndex].value 
} 
//--> 
</script> 
<input type="button" name="test" value="Click Here!" onClick="name_function()"> 
</form> 

Pay close attention to how we put together the two pieces of code  mentioned earlier:

location=document.name_form.name_select.options[document.name_form.name_select.selectedIndex].value 

• EXAMPLE

<HTML>
<HEAD>
    <TITLE>Combo Link Box</TITLE>
</HEAD>
<BODY>
<FORM method="POST" name="name_form">
   <SELECT name="name_select" size="1">
<OPTION selected value="http://www.cnet.com">Cnet</OPTION>
<OPTION value="http://www.cnn.com">CNN</OPTION>
<OPTION value="http://www.geocities.com">Geocities</OPTION>
   </SELECT>
        <SCRIPT language="javascript">
          <!--
          function name_function()
          {
          location=document.name_form.name_select.options
       [document.name_form.name_select.selectedIndex].value
          }
          //-->
        </SCRIPT>
  <INPUT type="button" name="name_button" value="GO!" 
                           onclick="name_function()">
</FORM>
</BODY>
</HTML>