Javascript: Retrieve text from an Option

Asked

Viewed 306 times

3

Where is the error in this code below that is only returning the state acronym?

window.onload=function(){
	var form = document.getElementsByTagName("form")[0];
	var cmdEstados = form.Estados;
	
	cmdEstados.onchange=function(){
		alert("Sigla: " + this.value + " Estado: " + this.firstChild.nodeValue);
	}
}
<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="utf-8"/>
		<title>Página Teste</title>
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
	<body>
		<form>			
			<SELECT name="Estados">
				<OPTION value=''>--Selecione--</OPTION>
				<OPTION value='CE'>Ceará</OPTION>
				<OPTION value='DF'>Distrito Federal</OPTION>				
				<OPTION value='PB'>Paraíba</OPTION>
				<OPTION value='PE'>Pernambuco</OPTION>
				<OPTION value='SP'>São Paulo</OPTION>
			</SELECT>
		</form>
	</body>
</html>

javascript

3 answers

2

Hello,

Using Pure JS.

window.onload=function(){
	var form = document.getElementsByTagName("form")[0];
	var cmdEstados = form.Estados;
	
	cmdEstados.onchange=function(){
		alert("Sigla: " + this.value + " Estado: " + this.options[this.selectedIndex].innerHTML);
	}
}
<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="utf-8"/>
		<title>Página Teste</title>
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
	<body>
		<form>			
			<SELECT name="Estados">
				<OPTION value=''>--Selecione--</OPTION>
				<OPTION value='CE'>Ceará</OPTION>
				<OPTION value='DF'>Distrito Federal</OPTION>				
				<OPTION value='PB'>Paraíba</OPTION>
				<OPTION value='PE'>Pernambuco</OPTION>
				<OPTION value='SP'>São Paulo</OPTION>
			</SELECT>
		</form>
	</body>
</html>

  • Thanks Paulo, it worked!

1


I suggest you use it like this:

var sigla = this.value;
var estado = this.options[this.selectedIndex].innerHTML;
alert("Sigla: " + sigla + " Estado: " + estado);

so you have access to value the chosen option, and also the innerHTML this option, although the path has to be var estado = this.options[this.selectedIndex].innerHTML

When you use .firstChild this will select a text node without nodeValue. Try document.querySelector('select').firstChild and will give you an ode on the console. If you do document.querySelector('select').firstChild.nodeValue will be empty.

window.onload=function(){
	var form = document.getElementsByTagName("form")[0];
	var cmdEstados = form.Estados;
	
	cmdEstados.onchange=function(){
        var sigla = this.value;
        var estado = this.options[this.selectedIndex].innerHTML;
		alert("Sigla: " + sigla + " Estado: " + estado);
	}
}
<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="utf-8"/>
		<title>Página Teste</title>
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
	<body>
		<form>			
			<SELECT name="Estados">
				<OPTION value=''>--Selecione--</OPTION>
				<OPTION value='CE'>Ceará</OPTION>
				<OPTION value='DF'>Distrito Federal</OPTION>				
				<OPTION value='PB'>Paraíba</OPTION>
				<OPTION value='PE'>Pernambuco</OPTION>
				<OPTION value='SP'>São Paulo</OPTION>
			</SELECT>
		</form>
	</body>
</html>

  • 1

    Now I understand my mistake. Thank you for the help and explanation Sergio!

1

Instead of:

this.firstChild.nodeValue

Write:

this.options[this.selectedIndex].innerHTML

The code will look like this:

window.onload=function(){
	var form = document.getElementsByTagName("form")[0];
	var cmdEstados = form.Estados;
	
	cmdEstados.onchange=function(){
		alert("Sigla: " + this.value + " Estado: " + this.options[this.selectedIndex].innerHTML);
	}
}
<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="utf-8"/>
		<title>Página Teste</title>
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
	<body>
		<form>			
			<SELECT name="Estados">
				<OPTION value=''>--Selecione--</OPTION>
				<OPTION value='CE'>Ceará</OPTION>
				<OPTION value='DF'>Distrito Federal</OPTION>				
				<OPTION value='PB'>Paraíba</OPTION>
				<OPTION value='PE'>Pernambuco</OPTION>
				<OPTION value='SP'>São Paulo</OPTION>
			</SELECT>
		</form>
	</body>
</html>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.