How to get the Text Value of a Selected Option with jQuery

John on February 10, 2021

In this tutorial, we will learn how to get the value and text of the selected option with jQuery.

Get the Value of a Selected Option

To get the value of the selected option, use the jQuery val() method on the select HTML element.

<select id="items">
  <option value="1">First</option>
  <option value="2" selected>Second</option>
  <option value="3">Third</option>
</select>

var val = $('#items').val();

console.log(val);

2

Here is a more comprehensive function demonstrating how to get the selected option when it is changed by the user:

<select id="items">
  <option value="1">First</option>
  <option value="2" selected>Second</option>
  <option value="3">Third</option>
</select>

$('#items').change(function () {
  var val = $(this).val();
  console.log(val);
});

Get the Text of a Selected Option

To get the text of the selected option, we will need to use the option:selected pseudo-selector to get the element, then use the jQuery text() method on it.

<select id="items">
  <option value="1">First</option>
  <option value="2" selected>Second</option>
  <option value="3">Third</option>
</select>

var val = $( "#items option:selected" ).text();

console.log(val);

Second

Here is another example of getting the selected option text with an on change event:

<select id="items">
  <option value="1">First</option>
  <option value="2" selected>Second</option>
  <option value="3">Third</option>
</select>

$('#items').change(function () {
  var val = $('#items option:selected').text();
    console.log(val);
});