http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FForm%2FSelect
JavaScript Tutorial/Form/Select - История изменений
2026-04-05T11:04:09Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/Select&diff=9109&oldid=prev
Admin: 1 версия
2010-05-26T08:24:47Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:24, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/Select&diff=9108&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>== Grouped selection control on change event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html> <br />
<head> <br />
<title>Color Changer 3</title> <br />
<script type="text/javascript"> <br />
function seeColor(list) { <br />
var newColor = (list.options[list.selectedIndex].value); <br />
if (newColor) { <br />
document.bgColor = newColor; <br />
} <br />
} <br />
</script> <br />
</head> <br />
<body onload="seeColor(document.getElementById("colorsList"))"> <br />
<form> <br />
<select name="colorsList" <br />
id="colorsList" onchange="seeColor(this)"> <br />
<optgroup id="optGrp1" label="Reds"> <br />
<option value="#ff9999">Light Red</option> <br />
<option value="#ff3366">Medium Red</option> <br />
<option value="#ff0000">Bright Red</option> <br />
<option value="#660000">Dark Red</option> <br />
</optgroup> <br />
<optgroup id="optGrp2" label="Greens"> <br />
<option value="#ccff66">Light Green</option> <br />
<option value="#99ff33">Medium Green</option> <br />
<option value="#00ff00">Bright Green</option> <br />
<option value="#006600">Dark Green</option> <br />
</optgroup> <br />
<optgroup id="optGrp3" label="Blues"> <br />
<option value="#ccffff">Light Blue</option> <br />
<option value="#66ccff">Medium Blue</option> <br />
<option value="#0000ff">Bright Blue</option> <br />
<option value="#000066">Dark Blue</option> <br />
</optgroup> <br />
</select></p> <br />
</form> <br />
</body> <br />
</html></source><br />
<br />
<br />
<br />
== Select==<br />
<br />
<p>Instances are created by the browser when it encounters an HTML <select> tag.</p><br />
<p>In the JavaScript object hierarchy, the Select object is located at window.document.Form.Select.</p><br />
<p>Event Handlers, Methods, and Properties Used by the Select Object</p><br />
Event Handlers/Methods/Properties<br />
Description<br />
onBlur<br />
Executed when the select box loses the focus.<br />
onChange<br />
Executed when the select box loses the focus and has had its value modified.<br />
onFocus<br />
Executed when the select box receives the focus.<br />
blur()<br />
Removes the focus from the select box.<br />
focus()<br />
Gives the focus to the select box.<br />
handleEvent()<br />
Invokes the handler for the event specified and was added in JavaScript 1.2.<br />
form<br />
Returns the entire form the select box is in.<br />
length<br />
Returns the number of options in the select box.<br />
name<br />
Returns the name of this select box specified by the NAME attribute.<br />
options<br />
Returns an array containing each of the items in the select box. These items are created using the <option> HTML tag.<br />
selectedIndex<br />
Returns an integer specifying the indexed location of the selected option in the select box.<br />
type<br />
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.<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function openWin(){<br />
var myInstance = document.myForm.mySelect;<br />
var myWin = open("", "","width=450,height=200");<br />
myWin.document.write("The length is: " + myInstance.length + "<br>");<br />
myWin.document.write("The name is: " + myInstance.name + "<br>");<br />
myWin.document.write("The selected option is located at position: ");<br />
myWin.document.write(myInstance.selectedIndex + "<br>");<br />
myWin.document.write("The type is: " + myInstance.type + "<br>");<br />
myWin.document.write(myInstance.form.myButton.value);<br />
myWin.document.close();<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm">My Favorite Sport is:<br />
<select name="mySelect"><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
<input type=BUTTON value="Click to Process" name="myButton"<br />
onClick="openWin()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Select.blur()==<br />
<br />
<p>The blur() method of the Select object removes focus from the select box.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function removeFocus(){<br />
document.myForm.mySelect.blur();<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<P><br />
<form name="myForm"><br />
<select name="mySelect" multiple><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
<input type=BUTTON value="Click to Remove Focus" name="myButton"<br />
onClick="removeFocus()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Select.focus()==<br />
<br />
<p>The focus() method gives the focus to the select box.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function setFocus(num){<br />
if(num == 1){<br />
document.myForm.mySelect1.focus();<br />
}else if(num == 2){<br />
document.myForm.mySelect2.focus();<br />
}<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<P><br />
<form name="myForm"><br />
<select name="mySelect1" multiple><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
<input type=BUTTON value="Click to Set Cursor" name="myButton1"<br />
onClick="setFocus(1)"><br />
<br><br />
<select name="mySelect2" multiple><br />
<option value=E>EE</option><br />
<option value=F>FF</option><br />
<option value=G>GG</option><br />
<option value=H>HH</option><br />
</select><br />
<input type=BUTTON value="Click to Set Cursor" name="myButton2"<br />
onClick="setFocus(2)"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Select.form==<br />
<br />
<p>The form property holds all the data of the form in which the select box is contained.</p><br />
<p>This allows a developer to obtain specific information about the form in which the select box is located.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function openWin(){<br />
var formData = document.myForm.mySelect.form;<br />
var myWin = open("", "","width=450,height=200");<br />
<br />
myWin.document.write("The name of the form is: " + formData.name + "<br>");<br />
myWin.document.write(formData.mySelect.selectedIndex + "<br>");<br />
myWin.document.write(formData.elements[1].name + "<br>");<br />
myWin.document.close();<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<select name="mySelect" multiple><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
<input type=BUTTON value="Click to Process" name="myButton"<br />
onClick="openWin()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Select.handleEvent()==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
select.handleEvent(event)</source><br />
<br />
<br />
<br />
== Select.length==<br />
<br />
<p>The length property of an instance of a Select object returns the number of items in the select box.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function getName(){<br />
alert("The length of this select box is " + document.myForm.mySelect.length);<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<select name="mySelect"><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
<input type=BUTTON value="Get Name" name="myButton" onClick="getName()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Select.name==<br />
<br />
<p>The name property returns the name of the select box.</p><br />
<p>This property is accessed via the elements array of a Form object and used to return the name of the select area.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function getName(){<br />
alert("The name of this select box is " + document.myForm.elements[0].name);<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<select name="mySelect" multiple><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
<input type=BUTTON value="Get Name" name="myButton" onClick="getName()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Select.onBlur==<br />
<br />
<p>The onBlur event handler is fired when the focus is moved away from that particular select box.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
var counter = 0;<br />
function comeBack(){<br />
document.myForm.mySelect1.focus();<br />
document.myForm.counter.value = counter++;<br />
}<br />
--><br />
</script><br />
</head><br />
<body onLoad="comeBack()"><br />
<form name="myForm"><br />
<select name="mySelect1" multiple onBlur="comeBack()"><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
<br><br />
<select name="mySelect2" multiple><br />
<option value=E>EE</option><br />
<option value=F>FF</option><br />
<option value=G>GG</option><br />
<option value=H>HH</option><br />
</select><br />
<input type=TEXT size=2 value="" name="counter"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Select.onChange==<br />
<br />
<p>The onChange event handler is fired when the option selected in the select box is changed.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function changeBack(form){<br />
for (var i = 0; i < form.mySelect.options.length; i++) {<br />
if (form.mySelect.options[i].selected){<br />
alert("You have selected " + form.mySelect.options[i].text);<br />
}<br />
}<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<select name="mySelect" onChange="changeBack(this.form)"><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Select.onFocus==<br />
<br />
<p>The onFocus event handler is fired when the focus is set on that particular select box.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
var counter = 0;<br />
function sendAway(){<br />
document.myForm.counter.focus();<br />
document.myForm.counter.value = counter++;<br />
}<br />
--><br />
</script><br />
</head><br />
<body onLoad="sendAway()"><br />
<form name="myForm"><br />
<select name="mySelect" multiple onFocus="sendAway()"><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
<input type=TEXT size=2 value="" name="counter"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Select.options==<br />
<br />
<p>The options property is an array that contains the option elements in the select box.</p><br />
<p>This property is used to retrieve properties of the options in a select box, such as the value or text.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function infoBox(form){<br />
var myIn = form.mySelect;<br />
var myWin = open("", "","width=400,height=150");<br />
<br />
for (var i = 0; i < form.mySelect.options.length; i++) {<br />
if (form.mySelect.options[i].selected){<br />
myWin.document.write("<br><b>Value:</b> " + myIn.options[i].value);<br />
myWin.document.write("<br><b>Text:</b> " + myIn.options[i].text);<br />
myWin.document.close();<br />
}<br />
}<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<select name="mySelect" onChange="infoBox(this.form)"><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Select.options.length==<br />
<br />
<p>The length property returns the number of options in that instance of a select box.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html> <br />
<form name="myForm"><br />
<select name="mySelect" onChange="alert(mySelect.options.length)"><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
</form><br />
</html></source><br />
<br />
<br />
<br />
== Select.options.selectedIndex==<br />
<br />
<p>The selectedIndex property returns the index number of the selected option in that instance of a select box.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<form name="myForm"><br />
<select name="mySelect" onChange="alert(mySelect.options.selectedIndex)"><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
</form><br />
</html></source><br />
<br />
<br />
<br />
== Select.options.value==<br />
<br />
<p>The value property returns the value of the option that is selected in that instance of a select box.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<form name="myForm"><br />
<select name="mySelect" onChange="alert(mySelect.options[selectedIndex].value)"><br />
<option value=A>AA</option><br />
<option value=B name=TEST>BB</option><br />
<option value=CC>CC</option><br />
<option value=DD>DD</option><br />
</select><br />
</form><br />
</html></source><br />
<br />
<br />
<br />
== Select.selectedIndex==<br />
<br />
<p>The selectedIndex property returns the index number of the selected option in that instance of a select box.</p><br />
<p>If this property is used to access a multiple select box, it will return the index number of the first selected item.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<form name="myForm"><br />
<select name="mySelect" onChange="alert(mySelect.selectedIndex)"><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
</form><br />
</html></source><br />
<br />
<br />
<br />
== Select.type==<br />
<br />
<p>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.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript1.1"><br />
<!--<br />
function getType(){<br />
alert("The name of this text box is " + document.myForm.elements[0].type);<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<select name="mySelect"><br />
<option value=A>AA</option><br />
<option value=B>BB</option><br />
<option value=C>CC</option><br />
<option value=D>DD</option><br />
</select><br />
<input type=BUTTON value="Get Type" name="myButton" onClick="getType()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Triggering a Value Change from a Pop-Up Menu==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html> <br />
<head> <br />
<title>Color Changer 2</title> <br />
<script type="text/javascript"> <br />
function seeColor(list) { <br />
var newColor = (list.options[list.selectedIndex].value); <br />
if (newColor) { <br />
document.bgColor = newColor; <br />
} <br />
} <br />
</script> <br />
</head> <br />
<body onload="seeColor(document.getElementById("colorsList"))"> <br />
<form> <br />
<select name="colorsList" id="colorsList" onchange="seeColor(this)"> <br />
<option selected="selected" value=""></option> <br />
<option value="A">A</option> <br />
<option value="B">B</option> <br />
<option value="C">C</option> <br />
<option value="D">D</option> <br />
</select><br />
</form> <br />
</body> <br />
</html></source></div>