Por el experto: Ing.
Ubaldo Acosta
[Link] obal [Link] .mx
Crear un proyecto con JavaScript para poner en práctica el
concepto de Select. Al finalizar veremos:
[Link] obal [Link] .mx
Creamos un nuevo proyecto:
[Link] obal [Link] .mx
Creamos un nuevo archivo [Link]:
[Link] obal [Link] .mx
Creamos un nuevo archivo [Link]:
[Link] obal [Link] .mx
Creamos un nuevo archivo [Link]:
[Link] obal [Link] .mx
Creamos un nuevo archivo [Link]:
[Link] obal [Link] .mx
Archivo [Link]:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cambio de Navegación</title>
<script type="text/javascript" src="[Link]"></script>
</head>
<body>
<h1>Cambio de Navegación</h1>
<select id="selectFaq">
<option selected>Selecciona un FAQ</option>
<option value="[Link]">Java FAQ</option>
<option value="[Link]">.Net FAQ</option>
<option value="[Link]">PHP FAQ</option>
</select>
</body>
</html>
[Link] obal [Link] .mx
Archivo [Link]:
/**
* @author ubaldo
*/
[Link] = configuraSelect;
function configuraSelect() {
//Este es el elemento seleccionado por default
[Link]("selectFaq").selectedIndex = 0;
[Link]("selectFaq").onchange = cambiaPagina;
}
function cambiaPagina() {
var elementoSelect = [Link]("selectFaq");
var nuevaPagina = [Link][[Link]].value;
if (nuevaPagina != "") {
[Link] = nuevaPagina;
}
}
[Link] obal [Link] .mx
Archivo [Link]:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java FAQ</title>
</head>
<body>
<h1>Java FAQ</h1>
<a href="[Link]">Regresar al Inicio</a>
</body>
</html>
[Link] obal [Link] .mx
Archivo [Link]:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>.Net FAQ</title>
</head>
<body>
<h1>.Net FAQ</h1>
<a href="[Link]">Regresar al Inicio</a>
</body>
</html>
[Link] obal [Link] .mx
Archivo [Link]:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Php FAQ</title>
</head>
<body>
<h1>Php FAQ</h1>
<a href="[Link]">Regresar al Inicio</a>
</body>
</html>
[Link] obal [Link] .mx
[Link] obal [Link] .mx
Con este ejercicio hemos puesto en práctica el concepto del
elemento Select de HTML, y con esto podemos agregarlo a
cualquier de nuestros formularios html.
Vimos cómo al seleccionar cualquiera de las opciones del
elemento Select, JavaScript detecta la opción seleccionada y
puede mandar una respuesta acorde a lo escogido.
[Link] obal [Link] .mx
Por: Ing. Ubaldo Acosta
[Link] obal [Link] .mx