How do I get the text of the selected option within a select?

Navigation
1

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> that is selected. For example:

text1 = item 1

    
asked by anonymous 07.11.2017 / 13:10

3 answers

3

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] which returns the selected options. In this case as a non-multiple 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>
    
07.11.2017 / 13:16
3

The Sergio answer already contemplates what was 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><selectid="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 .change so that when a change occurs in the element with id equal to selectOption is found, with .find the option that is selected, using the :selected . And then for answer purposes I return the response on the console, via console.log() .

You can also do this somewhat simpler way, which is also used .change so that when a change to the element with id equal to selectOption occurs, the option is found with the :selected , and returned on the 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><selectid="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>
    
07.11.2017 / 13:19
1
function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

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

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

var text = getSelectedText('test');
    
07.11.2017 / 13:22
How to disable windows update in Delphi What are the advantages and disadvantages of creating a Windows service