Javascript Reference - HTML DOM Select value Property

The value property sets or gets the value of the selected option in a drop-down list.

Browser Support


`value`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the value property.

var v = selectObject.value

Set the value property.

selectObject.value=value

Property Values

Value	Description
value	Set the value of an <option> element in a drop-down list that should be selected. If the value does not exist, the drop-down list will be empty

Return Value

A String type value representing the value attribute of an <option> element in the drop-down list.

If the drop-down list allows multiple selections, the first selected option is returned.

If there is no selected options, nothing is returned.

Example

The following code shows how to Return the value of a selected option in a drop-down list.


<!DOCTYPE html>
<html>
<body>
<!--from w w w  .  j  ava 2 s . c  om-->
<form>
Select your favorite fruit:
<select id="mySelect">
  <option value="C">C</option>
  <option value="A">A</option>
  <option value="P">P</option>
  <option value="B">B</option>
</select>
</form>
<button type="button" onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the selected option to "B".


<!DOCTYPE html>
<html>
<body>
<!-- w  w  w  .  j a  v a  2s. c  o m-->
<form>
Select your favorite fruit:
<select id="mySelect">
  <option value="C">C</option>
  <option value="A">A</option>
  <option value="P">P</option>
  <option value="B">B</option>
</select>
</form>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("mySelect").value = "B";
}
</script>

</body>
</html>

The code above is rendered as follows: