Capture text within the option tag

Question

I want to get the text inside the tag <option>TEXTO</option>. The situation is as follows:

<select xmlns="http://www.w3.org/1999/xhtml" id="page1:form_section:form1:selectListCampus" name="page1:form_section:form1:selectListCampus" class="form-control" size="1" onchange="OnChange_Campus(this);"><option value="">Selecionar uma Opção</option><option value="a0PA0000007bDQ7MAM" selected="selected">Exemplo 1</option><option value="a0PA0000007bDQCMA2">Exemplo 2</option></select>

I’ve tried to document.getElementById('page1:form_section:form1:selectListCampus').innerText to rescue the text "Example 1", but without success.

Answer 1

You want to get the text of the selected option, right?

If it is so try:

function OnChange_Campus(selectObj){
    var txtOpcao = selectObj.options[selectObj.selectedIndex].text;
    alert(txtOpcao);
}

Answer 2

For the selected option element, with Javascript:

document.getElementById("id-do-elemento").value

For a specific element of the options list, with Javascript:

document.getElementById("id-do-elemento").options[0].value

For the selected option element, with Jquery:

$("#id-do-elemento option:selected").text()

By option element value, with Jquery:

$("#id-do-elemento option[value='value-do-elemento']").text()

Answer 3

I think that $("#page1:form_section:form1:selectListCampus").text(); solves the problem. So just go find the selected option and instead of returning you to value, returns the text inside the tag.

Answer 4

You can do this in a variety of ways. It also depends a lot on what you need to implement. If only to store the values in a variable the example below demonstrates two cases:

//Criando um id no elemento
var val = document.getElementById('option1').innerText;
console.log(val);
// Iterando a lista
var el = document.querySelector('.form-control');
var elements = [];
for (let n = 0; n < el.length; n++) {
   elements.push(el[n].innerText);            
}
console.log(elements);

<select xmlns="http://www.w3.org/1999/xhtml" id="page1:form_section:form1:selectListCampus" name="page1:form_section:form1:selectListCampus" class="form-control" size="1" onchange="OnChange_Campus(this);"><option value="">Selecionar uma Opção</option><option value="a0PA0000007bDQ7MAM" id="option1" selected="selected">Exemplo 1</option><option value="a0PA0000007bDQCMA2">Exemplo 2</option></select>

Answer 5

Use the example in the Jquery API - Reference: JQUERY

$(function(){
$( "select" )
  .change(function() {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .trigger( "change" );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select xmlns="http://www.w3.org/1999/xhtml" 
	id="page1:form_section:form1:selectListCampus" 
	name="page1:form_section:form1:selectListCampus" 
	class="form-control" size="1">
		<option value="" selected="selected">Selecionar uma Opção</option>
		<option value="a0PA0000007bDQ7MAM" >Exemplo 1</option>
		<option value="a0PA0000007bDQCMA2">Exemplo 2</option>
	</select>
	<div></div>