Get selected value from a drop-down list with JavaScript/jQuery

This post will discuss how to get selected value from a dropdown list in JavaScript and jQuery.

1. Using jQuery

With jQuery, you can use the .val() method to get the selected value from a dropdown. This can be done in several ways using the :selected property to get the selected option, as shown below:

$("select option:selected").val();

$("select :selected").val();

$(":selected", $("select")).val();

$("select option").filter(":selected").val();

$("select").children("option").filter(":selected").val();

$("select").children("option:selected").val();

$("select").find("option:selected").val();

Here’s a live example:

JS

$(document).ready(function() {

$('#submit').click(function() {

$('#container').append(`The selected value is ` + $("#nums option:selected").val());

})

});

HTML

<label for="nums">Choose a value:</label>

<option value="three">Three</option>

</select>

<button id="submit">Get Selected Value</button>

Edit in JSFiddle

2. Using JavaScript

In plain JavaScript, you can do like:

JS

document.getElementById('submit').onclick = function() {

var e = document.getElementById("nums");

var value = e.options[e.selectedIndex].value;

document.getElementById("container").innerHTML = 'The selected value is ' + value;

}

HTML

<label for="nums">Choose a value:</label>

<option value="three">Three</option>

</select>

<button id="submit">Get Selected Value</button>

Edit in JSFiddle

Or use

JS

document.getElementById('submit').onclick = function() {

var value = document.getElementById("nums").selectedOptions[0].value;

document.getElementById("container").innerHTML = 'The selected value is ' + value;

}

HTML

<label for="nums">Choose a value:</label>

<option value="three">Three</option>

</select>

<button id="submit">Get Selected Value</button>

Edit in JSFiddle

That’s all about getting the selected value from a drop-down list in JavaScript and jQuery.

Get selected value from a drop-down list with JavaScript/jQuery

1. Using jQuery

JS

HTML

2. Using JavaScript

JS

HTML

JS

HTML

Share this: