Mega Code Archive

 
Categories / JavaScript Tutorial / Form
 

Select

Instances are created by the browser when it encounters an HTML 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/PropertiesDescription onBlurExecuted when the select box loses the focus. onChangeExecuted when the select box loses the focus and has had its value modified. onFocusExecuted 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. formReturns the entire form the select box is in. lengthReturns the number of options in the select box. nameReturns the name of this select box specified by the NAME attribute. optionsReturns an array containing each of the items in the select box. These items are created using the HTML tag. selectedIndexReturns an integer specifying the indexed location of the selected option in the select box. typeReturns the type specified by the TYPE attribute. For 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>