Capture text within the option tag

Navigation
0

I want to get the text that is inside the <option>TEXTO</option> tag. 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 have tried document.getElementById('page1:form_section:form1:selectListCampus').innerText to retrieve the text "Example 1", but to no avail.

    
asked by anonymous 10.04.2018 / 22:12

5 answers

2

You get the text of the selected option, right?

If so, try this: 

function OnChange_Campus(selectObj){
    var txtOpcao = selectObj.options[selectObj.selectedIndex].text;
    alert(txtOpcao);
}
    
10.04.2018 / 22:31
1

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

    
11.04.2018 / 12:17
1

For the selected option element, with JavaScript: 

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

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

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

For the selected option element, with Jquery: 

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

By value of the option element, with Jquery: 

$("#id-do-elemento option[value='value-do-elemento']").text()
    
10.04.2018 / 23:22
0

You can do this in several ways. This also depends a lot on what you need to implement. If it is just 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>
    
10.04.2018 / 22:35
0

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><selectxmlns="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>
    
10.04.2018 / 22:49
git hub! [rejected] - I can not know the github pro files Too big Array - Android