JavaScript Tutorial/Form/Select

Содержание

1 Grouped selection control on change event
2 Select
3 Select.blur()
4 Select.focus()
5 Select.form
6 Select.handleEvent()
7 Select.length
8 Select.name
9 Select.onBlur
10 Select.onChange
11 Select.onFocus
12 Select.options
13 Select.options.length
14 Select.options.selectedIndex
15 Select.options.value
16 Select.selectedIndex
17 Select.type
18 Triggering a Value Change from a Pop-Up Menu

Grouped selection control on change event

<html> 
<head> 
<title>Color Changer 3</title> 
<script type="text/javascript"> 
function seeColor(list) { 
    var newColor = (list.options[list.selectedIndex].value); 
    if (newColor) { 
        document.bgColor = newColor; 
    } 
} 
</script> 
</head> 
<body onload="seeColor(document.getElementById("colorsList"))"> 
<form> 
<select name="colorsList" 
id="colorsList" onchange="seeColor(this)"> 
<optgroup id="optGrp1" label="Reds"> 
<option value="#ff9999">Light Red</option> 
<option value="#ff3366">Medium Red</option> 
<option value="#ff0000">Bright Red</option> 
<option value="#660000">Dark Red</option> 
</optgroup> 
<optgroup id="optGrp2" label="Greens"> 
<option value="#ccff66">Light Green</option> 
<option value="#99ff33">Medium Green</option> 
<option value="#00ff00">Bright Green</option> 
<option value="#006600">Dark Green</option> 
</optgroup> 
<optgroup id="optGrp3" label="Blues"> 
<option value="#ccffff">Light Blue</option> 
<option value="#66ccff">Medium Blue</option> 
<option value="#0000ff">Bright Blue</option> 
<option value="#000066">Dark Blue</option> 
</optgroup> 
</select></p> 
</form> 
</body> 
</html>

Select

Instances are created by the browser when it encounters an HTML <select> tag.

In the JavaScript object hierarchy, the Select object is located at window.document.Form.Select.

Event Handlers, Methods, and Properties Used by the Select Object

Event Handlers/Methods/Properties Description onBlur Executed when the select box loses the focus. onChange Executed when the select box loses the focus and has had its value modified. onFocus Executed when the select box receives the focus. blur() Removes the focus from the select box. focus() Gives the focus to the select box. handleEvent() Invokes the handler for the event specified and was added in JavaScript 1.2. form Returns the entire form the select box is in. length Returns the number of options in the select box. name Returns the name of this select box specified by the NAME attribute. options Returns an array containing each of the items in the select box. These items are created using the <option> HTML tag. selectedIndex Returns an integer specifying the indexed location of the selected option in the select box. type Returns the type specified by the TYPE attribute. For <select> instances that contain the multiple attribute, this property returns select-multiple. Instances without this attribute return select-one.

<html>
    <head>
    <script language="JavaScript">
    <!--
    function openWin(){
      var myInstance = document.myForm.mySelect;
      var myWin = open("", "","width=450,height=200");
      myWin.document.write("The length is: " + myInstance.length + "<br>");
      myWin.document.write("The name is: " + myInstance.name + "<br>");
      myWin.document.write("The selected option is located at position: ");
      myWin.document.write(myInstance.selectedIndex + "<br>");
      myWin.document.write("The type is: " + myInstance.type + "<br>");
      myWin.document.write(myInstance.form.myButton.value);
      myWin.document.close();
    }
    -->
    </script>
    </head>
    <body>
    <form name="myForm">My Favorite Sport is:
      <select name="mySelect">
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
      </select>
    <input type=BUTTON value="Click to Process" name="myButton"
             onClick="openWin()">
    </form>
    </body>
    </html>

Select.blur()

The blur() method of the Select object removes focus from the select box.

<html>
    <head>
    <script language="JavaScript">
    <!--
    function removeFocus(){
      document.myForm.mySelect.blur();
    }
    -->
    </script>
    </head>
    <body>
    <P>
    <form name="myForm">
      <select name="mySelect" multiple>
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
      </select>
      <input type=BUTTON value="Click to Remove Focus" name="myButton"
            onClick="removeFocus()">
    </form>
    </body>
    </html>

Select.focus()

The focus() method gives the focus to the select box.

<html>
    <head>
    <script language="JavaScript">
    <!--
    function setFocus(num){
      if(num == 1){
        document.myForm.mySelect1.focus();
      }else if(num == 2){
        document.myForm.mySelect2.focus();
      }
    }
    -->
    </script>
    </head>
    <body>
    <P>
    <form name="myForm">
      <select name="mySelect1" multiple>
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
      </select>
      <input type=BUTTON value="Click to Set Cursor" name="myButton1"
             onClick="setFocus(1)">
      <br>
      <select name="mySelect2" multiple>
        <option value=E>EE</option>
        <option value=F>FF</option>
        <option value=G>GG</option>
        <option value=H>HH</option>
      </select>
      <input type=BUTTON value="Click to Set Cursor" name="myButton2"
             onClick="setFocus(2)">
    </form>
    </body>
    </html>

Select.form

The form property holds all the data of the form in which the select box is contained.

This allows a developer to obtain specific information about the form in which the select box is located.

<html>
    <head>
    <script language="JavaScript">
    <!--
    function openWin(){
      var formData = document.myForm.mySelect.form;
      var myWin = open("", "","width=450,height=200");
  
      myWin.document.write("The name of the form is: " + formData.name + "<br>");
      myWin.document.write(formData.mySelect.selectedIndex + "<br>");
      myWin.document.write(formData.elements[1].name + "<br>");
      myWin.document.close();
    }
    -->
    </script>
    </head>
    <body>
    <form name="myForm">
      <select name="mySelect" multiple>
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
      </select>
    <input type=BUTTON value="Click to Process" name="myButton"
            onClick="openWin()">
    </form>
    </body>
    </html>

Select.handleEvent()

Syntax

select.handleEvent(event)

Select.length

The length property of an instance of a Select object returns the number of items in the select box.

<html>
    <head>
    <script language="JavaScript">
    <!--
    function getName(){
      alert("The length of this select box is " + document.myForm.mySelect.length);
    }
    -->
    </script>
    </head>
    <body>
    <form name="myForm">
      <select name="mySelect">
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
      </select>
      <input type=BUTTON value="Get Name" name="myButton" onClick="getName()">
    </form>
    </body>
    </html>

Select.name

The name property returns the name of the select box.

This property is accessed via the elements array of a Form object and used to return the name of the select area.

<html>
    <head>
    <script language="JavaScript">
    <!--
    function getName(){
      alert("The name of this select box is " + document.myForm.elements[0].name);
    }
    -->
    </script>
    </head>
    <body>
    <form name="myForm">
      <select name="mySelect" multiple>
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
      </select>
      <input type=BUTTON value="Get Name" name="myButton" onClick="getName()">
    </form>
    </body>
    </html>

Select.onBlur

The onBlur event handler is fired when the focus is moved away from that particular select box.

<html>
    <head>
    <script language="JavaScript">
    <!--
    var counter = 0;
    function comeBack(){
      document.myForm.mySelect1.focus();
      document.myForm.counter.value = counter++;
    }
    -->
    </script>
    </head>
    <body onLoad="comeBack()">
    <form name="myForm">
      <select name="mySelect1" multiple onBlur="comeBack()">
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
      </select>
      <br>
      <select name="mySelect2" multiple>
        <option value=E>EE</option>
        <option value=F>FF</option>
        <option value=G>GG</option>
        <option value=H>HH</option>
      </select>
      <input type=TEXT size=2 value="" name="counter">
    </form>
    </body>
    </html>

Select.onChange

The onChange event handler is fired when the option selected in the select box is changed.

<html>
    <head>
    <script language="JavaScript">
    <!--
    function changeBack(form){
      for (var i = 0; i < form.mySelect.options.length; i++) {
        if (form.mySelect.options[i].selected){
          alert("You have selected " + form.mySelect.options[i].text);
        }
      }
    }
    -->
    </script>
    </head>
    <body>
    <form name="myForm">
      <select name="mySelect" onChange="changeBack(this.form)">
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
      </select>
    </form>
    </body>
    </html>

Select.onFocus

The onFocus event handler is fired when the focus is set on that particular select box.

<html>
    <head>
    <script language="JavaScript">
    <!--
    var counter = 0;
    function sendAway(){
      document.myForm.counter.focus();
      document.myForm.counter.value = counter++;
    }
    -->
    </script>
    </head>
    <body onLoad="sendAway()">
    <form name="myForm">
      <select name="mySelect" multiple onFocus="sendAway()">
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
      </select>
      <input type=TEXT size=2 value="" name="counter">
    </form>
    </body>
    </html>

Select.options

The options property is an array that contains the option elements in the select box.

This property is used to retrieve properties of the options in a select box, such as the value or text.

<html>
    <head>
    <script language="JavaScript">
    <!--
    function infoBox(form){
      var myIn = form.mySelect;
      var myWin = open("", "","width=400,height=150");
  
      for (var i = 0; i < form.mySelect.options.length; i++) {
        if (form.mySelect.options[i].selected){
          myWin.document.write("<br><b>Value:</b> " + myIn.options[i].value);
          myWin.document.write("<br><b>Text:</b> " + myIn.options[i].text);
          myWin.document.close();
        }
      }
    }
    -->
    </script>
    </head>
    <body>
    <form name="myForm">
      <select name="mySelect" onChange="infoBox(this.form)">
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
      </select>
    </form>
    </body>
    </html>

Select.options.length

The length property returns the number of options in that instance of a select box.

<html>  
    <form name="myForm">
      <select name="mySelect" onChange="alert(mySelect.options.length)">
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
      </select>
    </form>
</html>

Select.options.selectedIndex

The selectedIndex property returns the index number of the selected option in that instance of a select box.

<html>
    <form name="myForm">
      <select name="mySelect" onChange="alert(mySelect.options.selectedIndex)">
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
    </select>
    </form>
</html>

Select.options.value

The value property returns the value of the option that is selected in that instance of a select box.

<html>
    <form name="myForm">
    <select name="mySelect" onChange="alert(mySelect.options[selectedIndex].value)">
        <option value=A>AA</option>
        <option value=B name=TEST>BB</option>
        <option value=CC>CC</option>
        <option value=DD>DD</option>
      </select>
    </form>
</html>

Select.selectedIndex

The selectedIndex property returns the index number of the selected option in that instance of a select box.

If this property is used to access a multiple select box, it will return the index number of the first selected item.

<html>
    <form name="myForm">
      <select name="mySelect" onChange="alert(mySelect.selectedIndex)">
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
      </select>
    </form>
</html>

Select.type

The type property returns the type of the select box. This is either select-multiple, if the multiple attribute is set in the <select> tag, or select-one if it is not.

<html>
    <head>
    <script language="JavaScript1.1">
    <!--
    function getType(){
      alert("The name of this text box is " + document.myForm.elements[0].type);
    }
    -->
    </script>
    </head>
    <body>
    <form name="myForm">
      <select name="mySelect">
        <option value=A>AA</option>
        <option value=B>BB</option>
        <option value=C>CC</option>
        <option value=D>DD</option>
      </select>
      <input type=BUTTON value="Get Type" name="myButton" onClick="getType()">
    </form>
    </body>
    </html>

Triggering a Value Change from a Pop-Up Menu

<html> 
<head> 
<title>Color Changer 2</title> 
<script type="text/javascript"> 
function seeColor(list) { 
    var newColor = (list.options[list.selectedIndex].value); 
    if (newColor) { 
        document.bgColor = newColor; 
    } 
} 
</script> 
</head> 
<body onload="seeColor(document.getElementById("colorsList"))"> 
<form> 
<select name="colorsList" id="colorsList" onchange="seeColor(this)"> 
<option selected="selected" value=""></option> 
<option value="A">A</option> 
<option value="B">B</option> 
<option value="C">C</option> 
<option value="D">D</option> 
</select>
</form> 
</body> 
</html>