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

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

1. Using jQuery

With jQuery, you can use the text() or html() method to get the selected text from a dropdown. This can be done in several ways using the :selected property to get the chosen option of the select element, as shown below:

$("#pets option:selected").text();

$("#pets :selected").text();

$(":selected", $("#pets")).text();

$("#pets option").filter(":selected").text();

$("#pets").children("option").filter(":selected").text();

$("#pets").children("option:selected").text();

$("#pets").find("option:selected").text();

Here’s a live example:

JS

$(document).ready(function() {

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

$('#container').html(`The selected text is ` + $("#pets option:selected").text());

})

});

HTML

<label for="pets">Choose your pets:</label>

<option value="rabbit">Rabbit</option>

<option value="parrot">Parrot</option>

</select>

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

Edit in JSFiddle

2. Using JavaScript

In plain JavaScript, you can do like:

JS

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

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

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

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

}

HTML

<label for="pets">Choose your pets:</label>

<option value="rabbit">Rabbit</option>

<option value="parrot">Parrot</option>

</select>

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

Edit in JSFiddle

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

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

1. Using jQuery

JS

HTML

2. Using JavaScript

JS

HTML

Share this: