How to get the text of the selected option inside a select?

Question

I have the following code:

<option value="1">item 1</option>
<option value="2">item 1</option>
<option value="3">item 1</option>

I want to get the text inside the <option> selected. For example:

text1 = item 1

Answer 1

To Sergio’s response already contemplates what has been requested, however I would like to leave an alternative using jQuery:

$('#selectOption').change(function() {
var option = $('#selectOption').find(":selected").text();
console.log(option);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectOption">
    <option value="1">Op1</option>
    <option value="2">Op2</option>
    <option value="3">Op3</option>
    <option value="4">Op4</option>
    <option value="5">Op5</option>
</select>

I use the .change so that when a change occurs in the element with id equal to selectOption, is found, with the .find the option that is selected, using the selector :selected. And then for answer purposes I return the answer on the console, through console.log().

It can also do this other way, a little more simplified, which is also used the .change so that when a change occurs in the element with id equal to selectOption, the option with the selector is found :selected, and returned on console using console.log(), for response purposes:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectOption">
    <option value="1">Op1</option>
    <option value="2">Op2</option>
    <option value="3">Op3</option>
    <option value="4">Op4</option>
    <option value="5">Op5</option>
</select>

Answer 2

You can use select.children[select.selectedIndex] and then textContent:

Example:

var select = document.querySelector('select');
var option = select.children[select.selectedIndex];
var texto = option.textContent;

console.log(texto); // item 2

<select>
  <option value="1">item 1</option>
  <option value="2" selected>item 2</option>
  <option value="3">item 3</option>
</select>

This is the oldest/most compatible way, but you can also use .selectedOptions[0] that returns the options selected. In this case as is a multiple non-select would look like this:

var select = document.querySelector('select');
select.addEventListener('change', function() {
  var option = this.selectedOptions[0];
  var texto = option.textContent;

  console.log(texto);
});

<select>
  <option value="1">item 1</option>
  <option value="2" selected>item 2</option>
  <option value="3">item 3</option>
</select>

Answer 3

Thank you so much this post helped me a lot, congratulations to those who shared and helped thank you even.

My corrected code:

$(window).load(function(){
$('#button').click(function(){
                                
    //var textAdd = $('#inpudAdd').val();
    var textAdd = $('#inpudAdd').find(":selected").val();
    var textAdd2 = $('#inpudAdd').find(":selected").text();
    
    $('#inpudAdd').val('').focus();
    $('.boxLista').append('<b id="item"><input type="checkbox" name="app[]" id="item" checked="checked" value="' + textAdd + '" > ' + textAdd2 + '</br></b>  ');    

    });
    $(document).on('click', '#item', function(){
        $(this).remove();
    });
});

$(window).load(function(){
    $('#button2').click(function(){
        
    //var textAdd = $('#inpudAdd2').val();
    var textAdd = $( "#inpudAdd2 option:selected" ).val();;
    //var textAdd2 = $('#inpudAdd2').find(":selected").text();
    
    $('#inpudAdd2').val('').focus();
    $('.boxLista').append('<b id="item2"><input type="checkbox" name="app[]" id="item2" checked="checked" value="' + textAdd + '" > ' + textAdd + '</br></b>  ');   
        console.log(option);
    });
    $(document).on('click', '#item2', function(){
        $(this).remove();
    });
});

Answer 4

function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('test');