Scribd
Cargar
4 vistas

CHTML B Ejercicio SelectJavaScript

Cargado por

aye.trigo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
4 vistas

CHTML B Ejercicio SelectJavaScript

Cargado por

aye.trigo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 15

Por el experto: Ing.

Ubaldo Acosta

www.gl obal mentoring.com .mx


Crear un proyecto con JavaScript para poner en práctica el
concepto de Select. Al finalizar veremos:

www.gl obal mentoring.com .mx


Creamos un nuevo proyecto:

www.gl obal mentoring.com .mx


Creamos un nuevo archivo funciones.js:

www.gl obal mentoring.com .mx


Creamos un nuevo archivo javaFaq.html:

www.gl obal mentoring.com .mx


Creamos un nuevo archivo netFaq.html:

www.gl obal mentoring.com .mx


Creamos un nuevo archivo phpFaq.html:

www.gl obal mentoring.com .mx


Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cambio de Navegación</title>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<h1>Cambio de Navegaci&oacute;n</h1>
<select id="selectFaq">
<option selected>Selecciona un FAQ</option>
<option value="javaFaq.html">Java FAQ</option>
<option value="netFaq.html">.Net FAQ</option>
<option value="phpFaq.html">PHP FAQ</option>
</select>
</body>
</html>

www.gl obal mentoring.com .mx


Archivo funciones.js:
/**
* @author ubaldo
*/
window.onload = configuraSelect;

function configuraSelect() {
//Este es el elemento seleccionado por default
document.getElementById("selectFaq").selectedIndex = 0;
document.getElementById("selectFaq").onchange = cambiaPagina;
}

function cambiaPagina() {
var elementoSelect = document.getElementById("selectFaq");
var nuevaPagina = elementoSelect.options[elementoSelect.selectedIndex].value;
if (nuevaPagina != "") {
window.location = nuevaPagina;
}
}

www.gl obal mentoring.com .mx


Archivo javaFaq.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java FAQ</title>
</head>
<body>
<h1>Java FAQ</h1>
<a href="index.html">Regresar al Inicio</a>
</body>
</html>

www.gl obal mentoring.com .mx


Archivo netFaq.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>.Net FAQ</title>
</head>
<body>
<h1>.Net FAQ</h1>
<a href="index.html">Regresar al Inicio</a>
</body>
</html>

www.gl obal mentoring.com .mx


Archivo phpFaq.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Php FAQ</title>
</head>
<body>
<h1>Php FAQ</h1>
<a href="index.html">Regresar al Inicio</a>
</body>
</html>

www.gl obal mentoring.com .mx


www.gl obal mentoring.com .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.

www.gl obal mentoring.com .mx


Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

También podría gustarte