JavaScript Tutorial/Form/Option Object
Option
The Option object is used to reference a property of an HTML select list.
An Option object can be created by using the option constructor and specifying the appropriate values.
Property Description defaultSelected Refers to the option that is selected by default from the select box selected Refers to the selected value of the select box text Refers to the text for the option value Refers to the value that is returned to when the option is selected
<html>
<head>
<title> Example of the option object</title>
</head>
<body>
<script language="JavaScript">
<!--
function add(myForm) {
var option0 = new Option("A", "person1");
var option1 = new Option("B", "person2");
var option2 = new Option("C", "person3");
var option3 = new Option("D", "person4");
for (var i=0; i < 4; i++) {
eval("myForm.people.options[i]=option" + i)
}
}
-->
</script>
<form>
<select name="people" multiple></select><P>
<input type="button" value="Add People" onClick="add(this.form)">
</form>
</body>
</html>
Option.defaultSelected
The defaultSelected property specifies the initial option selection of the select list.
<html>
<head>
<title> Example of the defaultSelected property of the option object</title>
</head>
<body>
<script language="JavaScript">
<!--
function check(myForm){
for (var i = 0; i < document.form1.myList.length; i++) {
if (document.form1.myList.options[i].defaultSelected == true) {
alert("The default value is: 2");
}
}
}
-->
</script>
<form name=form1>
<select name="myList" multiple>
<option value=1>One
<option value=2 SELECTED>Two
<option value=3>Three
<option value=4>Four
</select><P>
<input type="button" value="Get Default Value" onClick="check(this.form)">
</form>
</body>
</html>
Option.selected
The selected property specifies the current selected option of the select list.
<html>
<head>
<title> Example of the selected property of the option object</title>
</head>
<body>
<script language="JavaScript">
<!--
function check(myForm){
for (var i = 0; i < document.form1.myList.length; i++) {
if (document.form1.myList.options[i].selected == true) {
alert("The selected value is: " + document.form1.myList.options[i].value);
}
}
}
-->
</script>
<form name=form1>
<select name="myList" multiple>
<option value=1>One
<option value=2>Two
<option value=3>Three
<option value=4>Four
</select><P>
<input type="button" value="Get Value" onClick="check(this.form)">
</form>
</body>
</html>
Option.text
The text property specifies the text for the selected option of the select list.
<html>
<head>
<title> Example of the text property of the option object</title>
</head>
<body>
<script language="JavaScript">
<!--
function check(myForm){
for (var i = 0; i < document.form1.myList.length; i++) {
if (document.form1.myList.options[i].selected == true) {
alert("The selected text value is: " + document.form1.myList.options[i].text);
}
}
}
-->
</script>
<form name=form1>
<select name="myList" multiple>
<option value=1>One
<option value=2>Two
<option value=3>Three
<option value=4>Four
</select><P>
<input type="button" value="Get Text Value" onClick="check(this.form)">
</form>
</body>
</html>
Option.value
The value property specifies the value that is returned to the server when the option is selected and the form is submitted.
<html>
<head>
<title> Example of the text value of the option object</title>
</head>
<body>
<script language="JavaScript">
<!--
function getValue(myForm){
for (var i = 0; i < document.form1.myList.length; i++) {
if (document.form1.myList.options[i].selected == true) {
alert("The selected value is: " + document.form1.myList.options[i].value);
}
}
}
-->
</script>
<form name=form1>
<select name="myList" multiple>
<option value=1>One
<option value=2>Two
<option value=3>Three
<option value=4>Four
</select><P>
<input type="button" value="Get Value" onClick="getValue(this.form)">
</form>
</body>
</html>