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.
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:
Codigo Javascript --GrupoSubNaturaleza:
aqui añado dinamicamente el select1:
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.
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.
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=""> </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
0