JavaScript - select combox dependiente de otro

   
Vista:

select combox dependiente de otro

Publicado por Wasp (24 intervenciones) el 21/06/2016 11:42:00
Buenos a todos/as.

Me gustaría básicamente que el contenido de un select sirva a otro.
Lo primero sería tener un select1 con informacion y dependiendo del value de dichos option, en el select2 apareciera su correspondiente informacion.

Dicha información es sacada dinámicamente de tablas SQL, por tanto, en el código no podría poner nada estático.
Todo lo hago desde un JSP. Mis lenguajes de programacion son JAVA, JSP, Servlet, SqlServer, Javascript y Jquery los que mueven mi aplicacion.


Codigo HTML para generar codigo dinamico.

1
2
3
4
5
<select id="añadirFiltro" name="añadirFiltro" onchange="añadirFiltroDerecha(this)">
	<option value="">&nbsp;</option>
	<option label="GrupoSubNaturaleza" value="grupo_id"></option>
	<option value="subNaturaleza_id">SubNaturaleza</option>
</select>


Este evento onchange lo que hara sera cada vez que el usuario pinche un option me genere dinamicamente otro select que seran los que me haran falta.

Evento onchange:
1
2
3
4
5
6
7
8
9
10
11
12
function añadirFiltroDerecha(valor){
	//creamos el salto de linea
	var saltoLinea = document.createElement("br");
	document.getElementById("formularioSelectGeneral").appendChild(saltoLinea);
 
	if(valor.value === "grupo_id"){
		obtenerGrupoSubNaturaleza(valor.value);
	}
	else if(valor.value === "subNaturaleza_id"){
		obtenerSubNaturaleza(valor.value);
	}
}



Codigo Javascript --GrupoSubNaturaleza:
aqui añado dinamicamente el select1:

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
function obtenerGrupoSubNaturaleza(valor){
 
	//Creamos el Select con JSP para hacer una llamada SQL
	<%
	String arrayJava = "";
		ArrayList<String[]> listaNaturaleza = new ArrayList<String[]>();
		listaNaturaleza = JDBCSelects.obtenerGrupoSubDescSubNaturaleza();
		Iterator<String[]> recorrerIterador = listaNaturaleza.iterator();
		while(recorrerIterador.hasNext()){
			String tablaValores[] = new String[2];
			tablaValores = recorrerIterador.next();
			arrayJava = arrayJava +", \"" +tablaValores[0]+ "- " +tablaValores[1]+"\"";
		}
		//aqui le vamos a quitar la coma del principio
		arrayJava = arrayJava.substring(2,arrayJava.length());
		System.out.println(arrayJava);
	%>
 
	var array = [<%=arrayJava.toString()%>];
 
	var contador, option;
	var select = document.createElement("select");
	select.setAttribute("id", "selectGrupoSubNaturalezaID");
	select.setAttribute("name", "selectGrupoSubNaturalezaID");
	select.setAttribute("multiple", "multiple", "selectGrupoSubNaturalezaID");
	for(contador = 0; contador < array.length; contador++){
		option = document.createElement("option");
		option.value = array[contador];
	        option.text = array[contador];
	        select.appendChild(option);
	}
	document.getElementById("divIzquierda").appendChild(select);
 
}
</script>

Ahora mismo por pantalla, lo que me muestra es un select con todos los grupos que necesito sacados en una base de datos.
Ahora lo que quiero es, que al pulsar cualquier option, ese option cargarlo en un segundo Select y ese me llame a otra funcion donde saque los datos.
Por ahora llevo esto, pero no me hace nada.

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
42
43
44
function obtenerSubNaturalezaDinamico(valor, grupo){
 
 
	//Creamos el Select con JSP para hacer una llamada SQL
	<%
		String arrayJavaSubDin = "";
		ArrayList<String[]> listaSubNaturalezaDin = new ArrayList<String[]>();
 
                //AQUI deberia de poder cargar lo que pulso en el primer select para que haga una consulta a la base de datos, pero nose como ponerlo.
		listaSubNaturalezaDin = JDBCSelects.obtenerSubNaturalezaDinamico(grupo);
 
 
		Iterator<String[]> recorrerIteradorSubDin = listaSubNaturaleza.iterator();
		while(recorrerIteradorSubDin.hasNext()){
			String tablaValores[] = new String[2];
			tablaValores = recorrerIteradorSubDin.next();
			arrayJavaSubDin = arrayJavaSubDin +", \"" +tablaValores[0].trim()+ " - " +tablaValores[1].trim()+"\"";
			arrayJavaSubDin.trim();
		}
 
		//aqui le vamos a quitar la coma del principio
		arrayJavaSubDin = arrayJavaSubDin.substring(2,arrayJavaSubDin.length());
		System.out.println(arrayJavaSubDin);
		System.out.println("Caracteres arrayJavaSub --> " +arrayJavaSubDin.length());
	%>
 
		var arraySubDin = [<%=arrayJavaSubDin%>];
 
		var contador, option;
		var select = document.createElement("select");
		select.setAttribute("id", "selectSubNaturalezaDinID");
		select.setAttribute("name", "selectSubNaturalezaDinID");
		select.setAttribute("multiple", "multiple", "selectSubNaturalezaDinID");
		for(contador = 0; contador < arraySubDin.length; contador++){
			option = document.createElement("option");
			option.value = arraySubDin[contador];
		        option.text = arraySubDin[contador];
			select.appendChild(option);
		}
		document.getElementById("divIzquierda").appendChild(select);
 
	}
 
</script>

Necesitaría no se si es otro evento o algo, que en mi metodo obtenerSubNaturalezaDinamico(grupo), este grupo que le paso como variable no sea null, sino algo, lo que sea y ya que lo busque en la base de dato si existe, y si existe que devuelva lo que ya esta puesto que va a funcionar.

A ver si alguien sabria echarme un cable, si no queda claro, porque es muy largo, lo explicare todo lo mejor que pueda.


Muchas gracias.
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

select combox dependiente de otro

Publicado por arck (74 intervenciones) el 21/06/2016 16:45:14
De primeras decirte que no se JSP y si no encuentras una solución, te ofrezco una de otra forma.

Si tienes jquery tienes ajax por lo que puedes ir a servidor a por los datos de forma totalmente independiente a la carga de la pagina.

Con esto http://api.jquery.com/jquery.ajax/
podrías enviar los datos al servidor y devolverlos y hacer lo que quieras con ellos.

Es mucho cambio.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar