JavaScript Tutorial/Form/Select

Материал из Web эксперт
Перейти к: навигация, поиск

Grouped selection control on change event

   <source lang="javascript">

<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></source>


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.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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></source>
   
  

Select.blur()

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



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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 Remove Focus" name="myButton" onClick="removeFocus()"> </form> </body> </html></source>

Select.focus()

<p>The focus() method gives the focus to the select box.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body>

<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)">
<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></source>

Select.form

<p>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.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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></source>
   
  

Select.handleEvent()

Syntax



   <source lang="javascript">

select.handleEvent(event)</source>


Select.length

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



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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></source>
   
  

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.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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></source>
   
  

Select.onBlur

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



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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>
     
<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></source>

Select.onChange

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



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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></source>
   
  

Select.onFocus

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



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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></source>
   
  

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.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript">
   
   </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></source>
   
  

Select.options.length

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



   <source lang="javascript">

<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></source>


Select.options.selectedIndex

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



   <source lang="javascript">

<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></source>


Select.options.value

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



   <source lang="javascript">

<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></source>


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.



   <source lang="javascript">

<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></source>


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.



   <source lang="javascript">

<html>

   <head>
   <script language="JavaScript1.1">
   
   </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></source>
   
  

Triggering a Value Change from a Pop-Up Menu

   <source lang="javascript">

<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></source>