Question

i have a select and i am trying to retrieve the displayed value of current selected option and i don’t mean mean the value=”” or .val()
let say this is my select

<select id="name" >
<option value="">select all</option>
<option selected="selected" value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>

lets say i am trying to retrieve the selected value of the current selected “Text 1”

I’ve tried

$('#name').text();

But this returns the text of all 4 options.

is there a better way ?

Answer 1

As simple as that:

$("#name > option:selected").text();

Or in pure JavaScript:

var selEl   = ​document.getElementById("name")​​,
    selText = selEl.options[selEl.selectedIndex].innerHTML;

console.log(selText);