En esta práctica de JavaScript he puesto en práctica el acceso a los datos de una lista desplegable múltiple de un formulario en HTML.
El usuario seleccionará una serie de medios de transporte y al pulsar sobre un botón se le mostrará un texto con los medios de transporte seleccionados.
Para poder comprender el código de esta práctica es muy importante conocer el uso de las propiedades options, selected y text en las listas desplegables de un formulario en HTML. Como ayuda puedes echarle un vistazo a los siguientes enlaces:
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Práctica de JavaScript</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
<script src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="contenedor">
<form name="seleccion">
<h2>Elija varios medios de transporte de la siguiente lista:</h2>
<select name="transportes" multiple>
<option value="Coche">Coche</option>
<option value="Moto">Moto</option>
<option value="Autobús">Autobús</option>
<option value="Tren">Tren</option>
<option value="Barco">Barco</option>
<option value="Avión">Avión</option>
</select<
<p><input type="button" id="boton" value="Pulse aquí después de elegir"/></p>
</form>
<p>Ha elegido los siguientes medios de transporte:</p>
<div id="caja"></div>
</div>
</body>
</html>Código CSS
#contenedor {
width: 600px;
margin: 0px auto;
}Código JavaScript
window.onload = inicializar;
function inicializar() {
document.getElementById("boton").addEventListener("click", transportes, false);
}
function transportes() {
let lista = document.seleccion.transportes;
let caja = document.getElementById("caja");
let opciones = lista.options;
caja.innerHTML = "";
for(let i = 0; i < opciones.length; i++) {
if(opciones[i].selected == true) {
let transportes = opciones[i].text;
caja.innerHTML += transportes + "
";
}
}
}Demostración
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.