http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FForm%2Fselect_option
JavaScript Tutorial/Form/select option - История изменений
2026-04-05T04:39:14Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/select_option&diff=9129&oldid=prev
Admin: 1 версия
2010-05-26T08:24:49Z
<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_option&diff=9128&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>== Click button to navigate a selection in form option (combox)==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<HTML><br />
<HEAD><br />
</HEAD><br />
<BODY><br />
<FORM name="f1"><br />
<SELECT name="s1"><br />
<OPTION SELECTED value="http://www.wbex.ru">wbex<br />
<OPTION value="http://www.wbex.ru">D<br />
<OPTION value="http://www.wbex.ru">C<br />
<OPTION value="http://www.wbex.ru">B<br />
<OPTION value="http://www.wbex.ru">A<br />
</SELECT><br />
<INPUT type="button" name="go" value="Go!" onClick="window.location=document.f1.s1.options[document.f1.s1.selectedIndex].value"><br />
</FORM><br />
</BODY><br />
</HTML></source><br />
<br />
<br />
<br />
== Find the selected option==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Find the selected option</title><br />
<script type="text/javascript" language="javascript"><br />
<!-- //<br />
function CheckOption(){<br />
var Selected = document.TestForm.PrizeChosen.selectedIndex;<br />
var SelectedOption = document.TestForm.PrizeChosen.options[Selected].value;<br />
alert("The prize you have chosen is a " + SelectedOption);<br />
}<br />
// --><br />
</script><br />
</head><br />
<body><br />
<form name="TestForm" action="http://www.wbex.ru" onsubmit="CheckOption()"><br />
<table><br />
<tr><br />
<td width="15%" align="right">Your Name:</td><br />
<td ><input type="text" name="Name"/></td><br />
</tr><br />
<tr><br />
<td align="right">Your Gender:</td><br />
<td><input type="text" name="Gender"/></td><br />
</tr><br />
<tr><br />
<td width="15%"><br />
<select name="PrizeChosen"><br />
<option value="A">Choice A</option><br />
<option value="B">Choice B</option><br />
<option value="C">Choice C</option><br />
</select><br />
</td><br />
<td>&nbsp;</td><br />
</tr><br />
<tr><br />
<td width="15%"><input type="submit" value="Submit the form"/></td><br />
<td>&nbsp;</td><br />
</tr><br />
</table><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Modifying optgroup Element Labels==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html> <br />
<head> <br />
<title>Color</title> <br />
<script type="text/javascript"> <br />
var naturalLabels = ["G1","G2","G3"]; <br />
function myFlag(list) { <br />
var optGrps = list.getElementsByTagName("optgroup"); <br />
for (var i = 0; i < optGrps.length; i++) { <br />
optGrps[i].label = naturalLabels[i]; <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 />
<optgroup id="optGrp1" label="Reds"> <br />
<option value="#ff9999">Light 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 />
</optgroup> <br />
<br />
<optgroup id="optGrp3" label="Blues"> <br />
<option value="#ccffff">Light Blue</option> <br />
</optgroup> <br />
</select><br />
<input type="radio" name="labels" <br />
onclick="myFlag(this.form.colorsList)" />Set Label</p> <br />
</form> <br />
</body> <br />
</html></source><br />
<br />
<br />
<br />
== Use the Option (combox) onChange event to navigate==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<HTML><br />
<HEAD><br />
</HEAD><br />
<BODY><br />
<FORM name="f2"><br />
<SELECT name="s2" onChange="window.location=document.f2.s2.options[document.f2.s2.selectedIndex].value"><br />
<OPTION SELECTED value="http://www.wbex.ru">E<br />
<OPTION value="http://www.wbex.ru">D<br />
<OPTION value="http://www.wbex.ru">C<br />
<OPTION value="http://www.wbex.ru">B<br />
<OPTION value="http://www.wbex.ru">A<br />
</SELECT><br />
</FORM><br />
</BODY><br />
</HTML></source><br />
<br />
<br />
<br />
== Using the options[index].text Property==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html> <br />
<head> <br />
<title>Color Changer 1</title> <br />
<script type="text/javascript"> <br />
function seeColor(form) { <br />
var newColor = (form.colorsList.options[form.colorsList.selectedIndex].text); <br />
document.bgColor = newColor; <br />
} <br />
</script> <br />
</head> <br />
<body> <br />
<form> <br />
<select name="colorsList"> <br />
<option selected="selected">Gray</option> <br />
<option>Yellow</option> <br />
<option>Black</option> <br />
<option>Red</option> <br />
</select><br />
<input type="button" value="Change It" onclick="seeColor(this.form)" /><br />
</form> <br />
</body> <br />
</html></source><br />
<br />
<br />
<br />
== Using the options[index].value Property==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html> <br />
<head> <br />
<title></title> <br />
<script type="text/javascript"> <br />
function seeColor(form) { <br />
var newColor = (form.colorsList.options[form.colorsList.selectedIndex].value); <br />
document.bgColor = newColor; <br />
} <br />
</script> <br />
</head> <br />
<body> <br />
<form> <br />
<select name="colorsList"> <br />
<option selected="selected" 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 />
<input type="button" value="Change It" onclick="seeColor(this.form)" /><br />
</form> <br />
</body> <br />
</html></source><br />
<br />
<br />
<br />
== Using the selectedIndex Property==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html> <br />
<head> <br />
<title>Select Inspector</title> <br />
<script type="text/javascript"> <br />
function inspect(form) { <br />
alert(form.colorsList.options[form.colorsList.selectedIndex].text); <br />
} <br />
</script> <br />
</head> <br />
<body> <br />
<form> <br />
<select name="colorsList"> <br />
<option selected="selected">Red</option> <br />
<option value="Plants">Green</option> <br />
<option>Blue</option> <br />
</select><br />
<input type="button" value="Show Selection" onclick="inspect(this.form)" /><br />
</form> <br />
</body> <br />
</html></source></div>