JavaScript Tutorial/Form/select option

Материал из Web эксперт
Версия от 08:24, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Click button to navigate a selection in form option (combox)

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM name="f1">
<SELECT name="s1">
<OPTION SELECTED value="http://www.wbex.ru">wbex
<OPTION value="http://www.wbex.ru">D
<OPTION value="http://www.wbex.ru">C
<OPTION value="http://www.wbex.ru">B
<OPTION value="http://www.wbex.ru">A
</SELECT>
<INPUT type="button" name="go" value="Go!" onClick="window.location=document.f1.s1.options[document.f1.s1.selectedIndex].value">
</FORM>
</BODY>
</HTML>


Find the selected option

<html>
<head>
<title>Find the selected option</title>
<script type="text/javascript" language="javascript">
<!-- //
function CheckOption(){
    var Selected = document.TestForm.PrizeChosen.selectedIndex;
    var SelectedOption = document.TestForm.PrizeChosen.options[Selected].value;
    alert("The prize you have chosen is a " + SelectedOption);
}
// -->
</script>
</head>
<body>
<form name="TestForm" action="http://www.wbex.ru" onsubmit="CheckOption()">
<table>
<tr>
 <td width="15%" align="right">Your Name:</td>
 <td ><input type="text" name="Name"/></td>
</tr>
<tr>
 <td align="right">Your Gender:</td>
 <td><input type="text" name="Gender"/></td>
</tr>
<tr>
 <td width="15%">
 <select name="PrizeChosen">
  <option value="A">Choice A</option>
  <option value="B">Choice B</option>
  <option value="C">Choice C</option>
 </select>
 </td>
 <td>&nbsp;</td>
</tr>
<tr>
 <td width="15%"><input type="submit" value="Submit the form"/></td>
 <td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>


Modifying optgroup Element Labels

<html> 
<head> 
<title>Color</title> 
<script type="text/javascript"> 
var naturalLabels = ["G1","G2","G3"]; 
function myFlag(list) { 
    var optGrps = list.getElementsByTagName("optgroup"); 
    for (var i = 0; i < optGrps.length; i++) { 
        optGrps[i].label = naturalLabels[i]; 
    } 
} 
</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="#660000">Dark Red</option> 
    </optgroup> 
    <optgroup id="optGrp2" label="Greens"> 
        <option value="#ccff66">Light Green</option> 
    </optgroup> 
    
    <optgroup id="optGrp3" label="Blues"> 
        <option value="#ccffff">Light Blue</option> 
    </optgroup> 
</select>
<input type="radio" name="labels" 
onclick="myFlag(this.form.colorsList)" />Set Label</p> 
</form> 
</body> 
</html>


Use the Option (combox) onChange event to navigate

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM name="f2">
<SELECT name="s2" onChange="window.location=document.f2.s2.options[document.f2.s2.selectedIndex].value">
<OPTION SELECTED value="http://www.wbex.ru">E
<OPTION value="http://www.wbex.ru">D
<OPTION value="http://www.wbex.ru">C
<OPTION value="http://www.wbex.ru">B
<OPTION value="http://www.wbex.ru">A
</SELECT>
</FORM>
</BODY>
</HTML>


Using the options[index].text Property

<html> 
<head> 
<title>Color Changer 1</title> 
<script type="text/javascript"> 
function seeColor(form) { 
    var newColor = (form.colorsList.options[form.colorsList.selectedIndex].text); 
    document.bgColor = newColor; 
} 
</script> 
</head> 
<body> 
<form> 
<select name="colorsList"> 
    <option selected="selected">Gray</option> 
    <option>Yellow</option> 
    <option>Black</option> 
    <option>Red</option> 
</select>
<input type="button" value="Change It" onclick="seeColor(this.form)" />
</form> 
</body> 
</html>


Using the options[index].value Property

<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
function seeColor(form) { 
    var newColor = (form.colorsList.options[form.colorsList.selectedIndex].value); 
    document.bgColor = newColor; 
} 
</script> 
</head> 
<body> 
<form> 
<select name="colorsList"> 
<option selected="selected" value="A">A</option> 
<option value="B">B</option> 
<option value="C">C</option> 
<option value="D">D</option> 
</select>
<input type="button" value="Change It" onclick="seeColor(this.form)" />
</form> 
</body> 
</html>


Using the selectedIndex Property

<html> 
<head> 
<title>Select Inspector</title> 
<script type="text/javascript"> 
function inspect(form) { 
    alert(form.colorsList.options[form.colorsList.selectedIndex].text); 
} 
</script> 
</head> 
<body> 
<form> 
<select name="colorsList"> 
<option selected="selected">Red</option> 
<option value="Plants">Green</option> 
<option>Blue</option> 
</select>
<input type="button" value="Show Selection" onclick="inspect(this.form)" />
</form> 
</body> 
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/select_option&oldid=9129»