Combo de combo

Urko56 · #1 (**permalink**) 12/04/2008, 17:19

Tengo que realizar una página en la que un combo debe mostrar valores en función del valor seleccionado en otro. Además estos valores se toman inicialmente de una base de datos, y una vez modificados se deben de actualizar.
Una ayudita?

Gracias

i_e_s27 · #2 (**permalink**) 12/04/2008, 20:15

Lo que tu estas buscando suele llamarse Combos Anidados o Combos Dependientes.

Aca te paso el codigo que yo uso en mis proyectos:

Código:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo Combos Anidados/Dependientes</title>

<%
	Dim adoCon
	Set adoCon = Server.CreateObject ("ADODB.Connection")
	adoCon.open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("base_de_datos.mdb")

	Dim rsComboCategoria, rsComboSubcategoria
	Dim strSQLComboCategoria, strSQLComboSubcategoria
	
	Set rsComboCategoria = Server.CreateObject("ADODB.Recordset")
	Set rsComboSubcategoria = Server.CreateObject("ADODB.Recordset")
	
	strSQLComboCategoria = "SELECT * FROM tblcategorias"
	strSQLComboSubcategoria = "SELECT * FROM tblsubcategorias"
	
	rsComboCategoria.Open strSQLComboCategoria, adoCon, 3, 3
	rsComboSubcategoria.Open strSQLComboSubcategoria, adoCon, 3, 3
	
%>
<script language = "JavaScript">
function RellenarCombo(ComboPadre, ComboDependiente, IDSelected) {
  
  IDsSubcategorias = new Array();
  IDsSubcategorias = [<%
	Dim EsPrimero
	EsPrimero = True
	rsComboSubcategoria.MoveFirst
	For x = 1 to rsComboSubcategoria.RecordCount
		If EsPrimero = False Then Response.Write(",")
		Response.Write("'" & rsComboSubcategoria("id") & "'")
		rsComboSubcategoria.MoveNext
		EsPrimero = False
	Next 'x
	Response.Write("];")
%>
  
  NombresSubcategorias = new Array();
  NombresSubcategorias = [<%
	EsPrimero = True
	rsComboSubcategoria.MoveFirst
	For x = 1 to rsComboSubcategoria.RecordCount
		If EsPrimero = False Then Response.Write(",")
		Response.Write("'" & rsComboSubcategoria("nombre_subcategoria") & "'")
		rsComboSubcategoria.MoveNext
		EsPrimero = False
	Next 'x
	Response.Write("];")
%>
  
  AsociacionSubcategorias = new Array();
  AsociacionSubcategorias = [<%
	EsPrimero = True
	rsComboSubcategoria.MoveFirst
	For x = 1 to rsComboSubcategoria.RecordCount
		If EsPrimero = False Then Response.Write(",")
		Response.Write("'" & rsComboSubcategoria("categoria_asociada") & "'")
		rsComboSubcategoria.MoveNext
		EsPrimero = False
	Next 'x
	Response.Write("];")
%>
  
  var IDItemSeleccionado = ComboPadre.options[ComboPadre.selectedIndex].value;
  ComboDependiente.length = 0;
  for (var i in IDsSubcategorias) {
    if (AsociacionSubcategorias[i] == IDItemSeleccionado) {
      ComboDependiente.options[ComboDependiente.length] = new Option(NombresSubcategorias[i], IDsSubcategorias[i]);
	  if (IDsSubcategorias[i] == IDSelected) {
	    ComboDependiente.options[ComboDependiente.length - 1].defaultSelected = true;
	    ComboDependiente.options[ComboDependiente.length - 1].selected = true;
	  }
    }
  }
}
</script>

</head>

<body onLoad="RellenarCombo(document.forms['EjemploCombos'].categoria, document.forms['EjemploCombos'].subcategoria);">
      <form id="EjemploCombos" name="EjemploCombos" method="post" target="_self" accept-charset="UTF-8">
      <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="97%" height="35"><label for="categoria">Categoria</label>
              <select name="categoria" id="categoria" style="width:180px" onChange="RellenarCombo(document.forms['EjemploCombos'].categoria, document.forms['EjemploCombos'].subcategoria);" accept-charset="UTF-8">
<%
          rsComboCategoria.MoveFirst
          For i = 1 to rsComboCategoria.RecordCount
              Response.Write("<option value=""" & rsComboCategoria("id") & """>" & rsComboCategoria("nombre_categoria") & "</option>")
              Response.Write(VbCrLf)
              rsComboCategoria.MoveNext
          Next 'i
%>
              </select></td>
          </tr>
          <tr>
            <td width="97%" height="35"><label for="subcategoria">Subcategoria</label>
              <select name="subcategoria" id="subcategoria" style="width:180px" accept-charset="UTF-8">
              </select></td>
          </tr>
      </table>
      </form>
</body>
</html>

Saludos!

Urko56 · #3 (**permalink**) 13/04/2008, 01:18

Gracias, me pongo con ello.

Un saludo

Urko56 · #4 (**permalink**) 13/04/2008, 04:19

Hasta aquí estupendo, y gracias por ello, pero mi problema va un poco más allá, ya que tengo (supongamos) una tercera tabla "articulos" con dos campos que son "idcategoria" e "idsubcategoria".
El problema está en que los combos además deben capturar el valor existente en esta tercera tabla.
Gracias de nuevo

i_e_s27 · #5 (**permalink**) 13/04/2008, 05:39

Cita:

Iniciado por Urko56

Hasta aquí estupendo, y gracias por ello, pero mi problema va un poco más allá, ya que tengo (supongamos) una tercera tabla "articulos" con dos campos que son "idcategoria" e "idsubcategoria".
El problema está en que los combos además deben capturar el valor existente en esta tercera tabla.
Gracias de nuevo

Mmmm no te entiendo muy bien lo que quieres decir... te refieres a dejar seleccionada una opcion en especial en los combos por defualt?

Bien... primero que nada obtiene el ID de la categoria y subcategoria y guardalos en unas variables llamadas CategoriaPredeterminada y SubCategoriaPredeterminada respectivamente.

Ahora en el combo llenado por ASP (combo Categoria o Combo Padre) debes cambiar las lineas:

Código:

<%
rsComboCategoria.MoveFirst
For i = 1 to rsComboCategoria.RecordCount
	Response.Write("<option value=""" & rsComboCategoria("id") & """>" & rsComboCategoria("nombre_categoria") & "</option>")
	Response.Write(VbCrLf)
	rsComboCategoria.MoveNext
Next 'i
%>

Por:

Código:

<%
rsComboCategoria.MoveFirst
For i = 1 to rsComboCategoria.RecordCount
	If i = CategoriaPredeterminada Then
		Response.Write("<option value=""" & rsComboCategoria("id") & """ SELECTED >" & rsComboCategoria("nombre_categoria") & "</option>")
	Else
		Response.Write("<option value=""" & rsComboCategoria("id") & """>" & rsComboCategoria("nombre_categoria") & "</option>")
	End If
	rsComboCategoria.MoveNext
Next 'i
%>

Y en la parte de JavaScript que controla el combo SubCategoria esta la variable opcional IDSelected en la funcion:

Código:

function RellenarCombo(ComboPadre, ComboDependiente, IDSelected)

Asi cuando llama la funcion pones:

Código:

"RellenarCombo(document.forms['EjemploCombos'].categoria, document.forms['EjemploCombos'].subcategoria," & SubCategoriaPredeterminada & ");"

...o...

Código:

"RellenarCombo(document.forms['EjemploCombos'].categoria, document.forms['EjemploCombos'].subcategoria,<%=SubCategoriaPredeterminada%>);"

...dependiendo del contexto.

Saludos!

Urko56 · #6 (**permalink**) 13/04/2008, 08:39

Perdona que te moleste de nuevo, pero no me va.
Después de mirar y remirar, he cambiado lo siguiente, que no sé si es correcto, pero tampoco.

Código:

If i = CategoriaPredeterminada Then
		Response.Write("<option value=""" & rsComboCategoria("id") & """ SELECTED >" & rsComboCategoria("nombre_categoria") & "</option>")
	Else
		Response.Write("<option value=""" & rsComboCategoria("id") & """>" & rsComboCategoria("nombre_categoria") & "</option>")
	End If
	rsComboCategoria.MoveNext
Next 'i

por....

Código:

If rsComboCategoria("id") = CategoriaPredeterminada Then
		Response.Write("<option value=""" & rsComboCategoria("id") & """ SELECTED >" & rsComboCategoria("nombre_categoria") & "</option>")
	Else
		Response.Write("<option value=""" & rsComboCategoria("id") & """>" & rsComboCategoria("nombre_categoria") & "</option>")
	End If
	rsComboCategoria.MoveNext
Next 'i

Cuando hablas de contexto, a la hora de enviar la variable a la función, supongo que te refieres al lenguaje. Yo trabajo con asp.

Gracias

elcucas · #7 (**permalink**) 30/04/2008, 05:55

No sé si lo conseguiste al final o no pero para dejar más claro el hilo y entendiendo que quieres cargar de entrada los combos con unos valores de un tabla yo lo resolví llamando a en el onload a los dos combos a cargar y pasandoles el id de la categoria y subcategoria, así:

Código:

<body onLoad="RellenarCombo(document.forms['EjemploCombos'].categoria, document.forms['EjemploCombos'].subcategoria,<%=rsPaciente.Fields("provincia")%>);RellenarCombo(document.forms['EjemploCombos'].categoria, document.forms['EjemploCombos'].subcategoria, <%=rsPaciente.Fields("ayuntamiento")%>);">

Como ves no definí las variables, simplemente llamo a la función con el id que me interesa.

Saludos

i_e_s27 · #8 (**permalink**) 30/04/2008, 17:56

Jojo, reviviste un tema viejito! Si, esa es la idea, yo lo uso asi, jaja, osea, justamente para eso es la funcion en JavaScript que yo cree!!