How do you display a selected value in a drop down list in HTML?

In this article, we will learn to get the selected values in the dropdown list in Javascript. We can get the values using 2 methods:

Table of Contents Show

How to get selected value in dropdown list using JavaScript ?
How to get the value of a select
Getting the value of a select with jQuery
How to get the text of a select
Getting the text from a select with jQuery
Select value Property
HTML <option> selected Attribute
HTML <select> Tag
How to display the selected option in a dropdown list with JavaScript?

By using the value property
By using selectedIndex property with the option property

We will understand both these methods through the examples.

Method 1: Using the value property:

The value of the selected element can be found by using the value property on the selected element that defines the list. This property returns a string representing the value attribute of the <option> element in the list. If no option is selected then nothing will be returned.

Syntax:

selectElement.value

Example: This example describes the value property that can be found for the selected elements.

HTML

<!DOCTYPE html>

<head>

<title>

How to get selected value in

dropdown list using JavaScript?

</title>

</head>

<body>

<h2 style="color: green">

GeeksforGeeks

</h2>

<b>

How to get selected value in dropdown

list using JavaScript?

</b>

<p> Select one from the given options:

<select id="select1">

<option value="free">Free</option>

<option value="basic">Basic</option>

<option value="premium">Premium</option>

</select>

</p>

<p> The value of the option selected is:

<span class="output"></span>

</p>

<button onclick="getOption()"> Check option </button>

<script type="text/javascript">

function getOption() {

selectElement = document.querySelector('#select1');

output = selectElement.value;

document.querySelector('.output').textContent = output;

}

</script>

</body>

</html>

Output:

value property

Method 2: Using selectedIndex property with the option property:

The selectedIndex property returns the index of the currently selected element in the dropdown list. This index starts from 0 and returns -1 if no option is selected. The options property returns the collection of all the option elements in the <select> dropdown list. The elements are sorted according to the source code of the page. The index found before it can be used with this property to get the selected element. This option’s value can be found by using the value property.

Syntax:

selectElement.options[selectElement.selectedIndex].value

Property value:

selectedIndex: It is used to set or get the index of the selected <option> element in the collection.
length: It is read-only property that is used to get the number of <option> elements in the collection.

Return value: It returns HTMLOptionsCollection Object by specifying all the <option> elements in the <select> element. The element will be sorted in the collection

Example: This example describes the selectedIndex property with the option property.

HTML

<!DOCTYPE html>

<head>

<title>

How to get selected value in

dropdown list using JavaScript?

</title>

</head>

<body>

<h2 style="color: green">

GeeksforGeeks

</h2>

<b>

How to get selected value in

dropdown list using JavaScript?

</b>

<p> Select one from the given options:

<select id="select1">

<option value="free">Free</option>

<option value="basic">Basic</option>

<option value="premium">Premium</option>

</select>

</p>

<p> The value of the option selected is:

<span class="output"></span>

</p>

<button onclick="getOption()">Check option</button>

<script type="text/javascript">

function getOption() {

selectElement = document.querySelector('#select1');

output = selectElement.options[selectElement.selectedIndex].value;

document.querySelector('.output').textContent = output;

}

</script>

</body>

</html>

Output:

selectedIndex property with option property

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

Article Tags :

JavaScript

Web Technologies

Web technologies Questions

JavaScript-Questions

Read Full Article

How to get the value of a select

To get the value of a select or dropdown in HTML using pure JavaScript, first we get the select tag, in this case by id, and then we get the selected value through the selectedIndex property.

var select = document.getElementById('language'); var value = select.options[select.selectedIndex].value; console.log(value); // en

The value "en" will be printed on the console (Ctrl + Shift + J to open the console).

Getting the value of a select with jQuery

$('#language').val(); // en

How to get the text of a select

To get the content of an option, but not the value, the code is almost the same, just take the text property instead of value.

var select = document.getElementById('language'); var text = select.options[select.selectedIndex].text; console.log(text); // English

The text "English" will be printed on the console (Ctrl + Shift + J to open the console).

Getting the text from a select with jQuery

$('#language :selected').text(); // English

Select value Property

❮ Select Object

Example

Change the selected option to "banana":

document.getElementById("mySelect").value = "banana";

Try it Yourself »

HTML <option> selected Attribute

❮ HTML <option> tag

Example

A drop-down list with a pre-selected option:

<label for="cars">Choose a car:</label>

<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>

Try it Yourself »

HTML <select> Tag

❮ Previous Complete HTML Reference Next ❯

Example

Create a drop-down list with four options:

<label for="cars">Choose a car:</label>

<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

Try it Yourself »

More "Try it Yourself" examples below.

HTMLJavascriptProgramming Scripts

To display the selected option in a dropdown list with JavaScript, you can try to run the following code. This allows the user to get the value he selected from the dropdown list.