JavaScript: Retrieve text from an Option

Question

JavaScript: Retrieve text from an Option

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

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

asked by anonymous 07.12.2015 / 17:40

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>

07.12.2015 / 17:44

1

Instead of:

this.firstChild.nodeValue

Type:

this.options[this.selectedIndex].innerHTML

The code looks 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>

07.12.2015 / 17:49

Can I use "mysql_real_escape_string" in site "mysqli_connect"? Access MDF database from the executable folder

score 1 · Accepted Answer

I suggest using this:

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

This way you have access to the value of the option chosen, and also to innerHTML of this option, although the path must 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 it will give you a node in the console. If you do document.querySelector('select').firstChild.nodeValue it 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>