Using SELECT Controls

Using <SELECT> Controls

When the user makes a selection in a single-selection <SELECT> control (that is, a <SELECT> control that doesn't include the MULTIPLE standalone HTML attribute), an onchange event occurs and you can use the selectedIndex property to get the current selection. Here's an example that does exactly that:

(Listing 13-08.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Using Select Controls          </TITLE>          <SCRIPT LANGUAGE = JavaScript>              <!--  function reportSelection()   {   document.form1.text1.value = "You chose item" +   (document.form1.select1.selectedIndex + 1)   }  //-->          </SCRIPT>      </HEAD>      <BODY>          <FORM NAME="form1">              <H1>Using Select Controls</H1>              <INPUT NAME="text1" TYPE="TEXT" SIZE = "20">              <BR>  <SELECT NAME="select1" ONCHANGE="reportSelection()">   <OPTION>Option 1   <OPTION>Option 2   <OPTION>Option 3   <OPTION>Option 4   <OPTION>Option 5   </SELECT>  </FORM>      </BODY>  </HTML>

You can see the results of this code in Figure 13.9.

Figure 13.9. Making a selection in a `<SELECT>` control.

graphics/13fig09.gif

Note that this <SELECT> control appears as a drop-down list. You can change that into a static list displaying multiple items simultaneously if you use the SIZE attribute. For example, here's how to display three items simultaneously:

(Listing 13-09.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Using Select Controls          </TITLE>          <SCRIPT LANGUAGE = JavaScript>              <!--             function reportSelection()              {                  document.form1.text1.value = "You chose item" +                      (document.form1.select1.selectedIndex + 1)              }              //-->           </SCRIPT>      </HEAD>      <BODY>          <FORM NAME="form1">              <H1>Using Select Controls</H1>              <INPUT NAME="text1" TYPE="TEXT" SIZE = "20">              <BR>  <SELECT NAME="select1" SIZE="3" ONCHANGE="reportSelection()">  <OPTION>Option 1                  <OPTION>Option 2                  <OPTION>Option 3                  <OPTION>Option 4                  <OPTION>Option 5              </SELECT>          </FORM>      </BODY>  </HTML>

You can see the results of this code in Figure 13.10.

Figure 13.10. Displaying multiple items in a `<SELECT>` control.

graphics/13fig10.gif

You also can use the MULTIPLE HTML attribute to allow a <SELECT> control to handle multiple selections. (In Windows, for example, the user can make multiple selections by clicking and using the Shift or Ctrl keys).

When the user makes multiple selections, you can't just use the <SELECT> element's selectedIndex property anymore, because there is more than one selection. Instead, you must loop over the items in the options collection, checking each one's selected property to see whether it's selected. Here's an example. Note that I'm using the MULTIPLE HTML attribute in the <SELECT> control to make it a multiselect control:

(Listing 13-10.html on the web site)

 <HTML>      <HEAD>          <TITLE>Handling multiple selections</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function selectionMade()   {   document.form1.textarea1.value = "You selected:\n"   with(document.form1.select1){   for(var loopIndex = 0; loopIndex < length; loopIndex++){   if (options[loopIndex].selected){   document.form1.textarea1.value += options[loopIndex].text + "\  n"   }   }   }   }  //-->          </SCRIPT>      </HEAD>       <BODY>          <H1>Handling multiple selections</H1>  <FORM NAME="form1">   <SELECT NAME="select1" ONCHANGE="selectionMade()" MULTIPLE>   <OPTION>Option 1   <OPTION>Option 2   <OPTION>Option 3   <OPTION>Option 4   <OPTION>Option 5   </SELECT>  <BR>              <TEXTAREA NAME="textarea1" COLS="20" ROWS="10"></TEXTAREA>          </FORM>      </BODY>  </HTML>

You can see the results of this code in Figure 13.11.

Figure 13.11. Handling multiple selections in a `<SELECT>` control.

graphics/13fig11.gif