Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Rellenar un select dinámico desde un JS

JavaScript - Rellenar un select dinámico desde un JS

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Carlos
Val: 1
Ha disminuido su posición en 3 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Rellenar un select dinámico desde un JS

Publicado por Carlos (1 intervención) el 04/12/2018 11:59:08
Hola buen día a todos!

Estoy completando un ejercicio donde me piden cargar un select dinámico (combo) de un formulario en html desde un archivo .js

He buscado información y no he conseguido nada.


El código de archivo .js es el siguiente:

1
2
3
4
5
6
var dptosLocs = {
	"Artigas":["Artigas","Bella Unión"],
	"Canelones":["Canelones","Santa Lucía"],
	"Montevideo":["Montevideo"],
	"Salto":["Salto","Daymán","Arapey"]
};


Agradecería mucho su ayuda. !
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzer0x
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Rellenar un select dinámico desde un JS

Publicado por abzer0x (130 intervenciones) el 04/12/2018 22:38:32
Hola Carlos, te dejo un pequeño ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
 
<head>
	<title>Docuement</title>
	<meta charset="UTF-8" />
</head>
 
<body>
	<div id="container">
		<!-- 

			Aquí se agregan algunos de los departamentos y 

			localidades correspondientes de Uruguay

		-->
	</div>
 
	<script>
		document.addEventListener("DOMContentLoaded", () => {
			const dptosLocs = {
				"Artigas":["Artigas","Bella Unión"],
				"Canelones":["Canelones","Santa Lucía"],
				"Montevideo":["Montevideo"],
				"Salto":["Salto","Daymán","Arapey"]
			};
			const select = document.createElement("SELECT");
			Object.keys(dptosLocs).forEach(key => {
				const optionGroup = document.createElement("OPTGROUP");
				optionGroup.setAttribute("label", key);
				dptosLocs[key].forEach(e => {
					const option = document.createElement("OPTION");
					option.textContent = e;
					optionGroup.appendChild(option);
				});
				select.appendChild(optionGroup);
			});
			document.getElementById("container").appendChild(select);
		})
	</script>
</body>
 
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar