Ver Mensaje Individual
  #2 (permalink)  
Antiguo 10/05/2004, 21:56
Avatar de sism82
sism82
 
Fecha de Ingreso: octubre-2003
Ubicación: Guadalajara
Mensajes: 865
Antigüedad: 20 años, 6 meses
Puntos: 1
javascript dinámico

te hice el siguiente código, le harian falta cosas de validación, pero eso ya es cosa aparte... le puse comentarios, si te quedan dudas avisame, y en cuanto pueda te contesto, pero te recomiendo que revises el código y trates de entenderlo, antes de preguntarme de nuevo...

el ejemplo maneja alimentos, por ejemplo, si seleccionas en el primer combo box la opcion "verduras" en el segundo te apareceran solo verduras(zanahoria etc). Te incluyo la estructura de la base de datos que hice, la base se llama "alimentos"...

este código lo puedes copiar directamente en el espacio de consultas SQL de phpmyadmin....

CREATE TABLE nombres (
idNombre int(2) NOT NULL auto_increment,
idTipo int(2) NOT NULL default '0',
nombre varchar(200) NOT NULL default '',
UNIQUE KEY idNombre (idNombre),
UNIQUE KEY idNombre_2 (idNombre)
) TYPE=MyISAM;

CREATE TABLE tipos (
idTipo int(2) NOT NULL auto_increment,
tipo varchar(200) NOT NULL default '',
UNIQUE KEY idTipo (idTipo)
) TYPE=MyISAM;

listo, ya tienes tu base de datos, te incluyo el codigo PHP generar la página, no se como se vea aqui, pero mejor copialo y pegalo en un editor para que te resalte sintaxis:

<html>
<head>
<title>Cambio Select Option</title>
<?php
//me conecto a la base de datos, esto lo debes hacer con una función preferentemente para no hacerlo en cada página
$con = mysql_connect("localhost","root","") or die("Error al conectar...");
mysql_select_db("alimentos",$con);

//consulto las opciones principales
$sqlTipos = "SELECT * FROM tipos";

//los resultSet se duplican para mayor claridad, uno se usa para generar el html del combo box, el otro para el javascript
$rssTipos = mysql_query($sqlTipos,$con) or die(mysql_error($con));
$rssJsTipos = mysql_query($sqlTipos,$con) or die(mysql_error($con));

//genero el html para las opciones principales
$htmlTipos = "<option value=\"0\">Seleccione un Tipo de Alimento</option>\n";
while($tipos = mysql_fetch_object($rssTipos))
$htmlTipos .= "<option value=\"".$tipos->idTipo."\">".$tipos->tipo."</option>\n";
?>
<script language="JavaScript">
function cambiaOpciones()
{
tipo = document.getElementById("tipos").value;//obtengo el valor del primer select(opciones principales)
names = document.getElementById("nombres");//hago referencia a el select de nombres
cuantos = names.length;//obtegno su extensión(cuantas opciones tiene)
for(i = 0; i < cuantos; i++)
names.options.remove(0);//elimino las actuales
//dependiendo del tipo, se generan las opciones que le correspnden
//este switch es generado con PHP para que las cpciones correspondan a lo que hay en la base de datos
//te recomiendo que revises el código HTML generado al ejecutar esta página PHP para que veas como queda finalmente el JavaScript
switch(tipo)
{
<?php while($tipoJs = mysql_fetch_object($rssJsTipos)){ ?>//mientras haya tipos, genera opciones
case '<?php echo $tipoJs->idTipo; ?>':
<?php
$sqlOpciones = "SELECT * FROM nombres WHERE idTipo = ".$tipoJs->idTipo;
$rssOpciones = mysql_query($sqlOpciones,$con) or die(mysql_error($con));
while($opcion = mysql_fetch_object($rssOpciones)){
?>
opcion<?php echo $opcion->idNombre; ?> = document.createElement("option");
opcion<?php echo $opcion->idNombre; ?>.value = "<?php echo $opcion->idNombre; ?>";
opcion<?php echo $opcion->idNombre; ?>.text = "<?php echo $opcion->nombre; ?>";
names.options.add(opcion<?php echo $opcion->idNombre; ?>);
<?php } ?>
break;
<?php }?>
default://si no selecciono niguna, deja la opcion default
defaultOp = document.createElement("option");
defaultOp.text = "Primero seleccione Tipo de Alimento";
defaultOp.value = "0";
names.options.add(defaultOp);
break;
}
return true;//siempre es bueno que las funciones te devuelvan algun valor, aunque no tenga utilidad directa
}
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="nombrecualquiera" action="cualquiera.php" method="post">
<table border="1" cellpadding="5" cellspacing="0" bordercolor="#000000">
<tr bordercolor="#FFFFFF">
<td colspan="2">Este formulario cambia la fuente del segundo select(combo box)</td>
</tr>
<tr bordercolor="#FFFFFF">
<td>Tipo de Alimento: </td>
<td><select name="tipos" onChange="cambiaOpciones();">
<?php echo $htmlTipos; ?>
</select></td>
</tr>
<tr bordercolor="#FFFFFF">
<td>Nombre del Alimento: </td>
<td><select name="nombres">
<option value="0">Primero Seleccione Tipo de Alimento</option>
</select></td>
</tr>
</table>
</form>
</body>
</html>

listo, saludos....