In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > value (keygen, option, select)

value property (keygen, option, select)

Browser support:

Specifies or returns the value of an option or a select element.

The value of a selected option element will be sent when the form is submitted. See the page for the select element to get detailed information about the submitted data that belong to the option tags.

The value property of a select element can be used to get the value of the selected option tag. In a multiple-selection list the value property of the select element gets the value of the first selected option tag. If there is no selected item, the value property of the select element is empty.
You can set the selected element by value with the value property of the select element.

If you want to set or retrieve the selected option by index, use the selectedIndex property. See the page for the selectedIndex and selected property for further details.

Syntax:

object.value;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: value

Possible values:

String that sets or retrieves the value of the element.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the value attribute:

<select name="Fruit" size="3">
    <option value="Apple" />Apple
    <option value="Pear" />Pear
    <option value="Peach" selected="selected" />Peach
</select>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the value property in a single-selection list:

<head>
    <script type="text/javascript">
        function GetSelectedValue () {
            var select = document.getElementById ("month");
            alert (select.value);
        }
        function SelectByValue () {
            var select = document.getElementById ("month");
            select.value = "2";
        }
    </script>
</head>
<body>
    <select id="month" size="3">
        <option value="1" />January
        <option value="2" />February
        <option value="3" selected="selected" />March
    </select>

    <br />
    <button onclick="GetSelectedValue ();">Get the value of the selected option!</button>
    <br />
    <button onclick="SelectByValue ();">Select February by value!</button>
</body>