Buenas amigos, espero esten bien, les escribo por lo siguiente, estoy creando un formulario para guardar datos de listas deslegables anidadas, y consegui un tuto en internet, descargue los archivos y hasta ahora me ha ido bien, salvo una cosa, cuando voy a guardar los datos de los selects que me generan los scripts me guarda los ids de los registros de las tablas, me gustaria que me guarde los nombres de las opciones como tal; lo q estoy creando es un pequeño sistemita de taxonomia, y me gustaria guardarlo de esa manera para no tener problemas a la hora de mostrar informacion acerca de algunas especies de animales.. Aqui les dejo los códigos:
reg_sp.php (El formulario, pongo solo los selects porq es algo largo)
<?php
//Llamamos a config
require_once('../../librerias/config.php');
function generaSelect()
{
//include '../librerias/conexion.php';
//conectar();
$consulta=mysql_query("SELECT id, opcion FROM reino");
//desconectar();
// Voy imprimiendo el primer select
echo "<select name='select1' id='select1' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Selecciona Opción...</option>";
while($registro=mysql_fetch_row($consulta))
{
echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
}
echo "</select>";
}
?>
<td><span class="title03">Reino:</span><br />
<div id="demoIzq">
<?php generaSelect(); ?>
</div></td>
<td><span class="title03">Phylum:</span><br />
<div id="demoMed">
<select name="select2" disabled="disabled" id="select2">
<option value="0">Selecciona opción...</option>
</select>
</div></td>
<td><span class="title03">Clase:</span><br />
<div id="demoDer">
<select name="select3" disabled="disabled" id="select3">
<option value="0">Selecciona opción...</option>
</select>
</div></td>
<td><span class="title03">Orden:</span><br />
<div id="demoMed2">
<select name="select4" disabled="disabled" id="select4">
<option value="0">Selecciona opción...</option>
</select>
</div></td>
</tr>
<tr>
<td><span class="title03">Familia:</span><br />
<div id="demoMed3">
<select name="select5" disabled="disabled" id="select5">
<option value="0">Selecciona opción...</option>
</select>
</div></td>
<td><span class="title03">Genero:</span><br />
<div id="demoMed4">
<select name="select6" disabled="disabled" id="select6">
<option value="0">Selecciona opción...</option>
</select>
</div></td>
cons_sel.php (Script que realiza la consulta de carga de datos a los selects)
<?php
// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
$listadoSelects=array(
"select1"=>"reino",
"select2"=>"phylum",
"select3"=>"clase",
"select4"=>"orden",
"select5"=>"familia",
"select6"=>"genero"
);
function validaSelect($selectDestino)
{
// Se valida que el select enviado via GET exista
global $listadoSelects;
if(isset($listadoSelects[$selectDestino])) return true;
else return false;
}
function validaOpcion($opcionSeleccionada)
{
// Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
if(is_numeric($opcionSeleccionada)) return true;
else return false;
}
$selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];
if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
{
$tabla=$listadoSelects[$selectDestino];
include '../../librerias/config.php';
//conectar();
$consulta=mysql_query("SELECT id, opcion FROM $tabla WHERE relac='$opcionSeleccionada'") or die(mysql_error());
//desconectar();
// Comienzo a imprimir el select
echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Selecciona opción...</option>";
while($registro=mysql_fetch_row($consulta))
{
// Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
$registro[1]=htmlentities($registro[1]);
// Imprimo las opciones del select
echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
}
echo "</select>";
}
?>
Aqui dejo un archivo .js que forma parte del modulo, si hay q cambiar el tema de foro, no hay problema.
function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E)
{
if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
}
}
return xmlhttp;
}
// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="select1";
listadoSelects[1]="select2";
listadoSelects[2]="select3";
listadoSelects[3]="select4";
listadoSelects[4]="select5";
listadoSelects[5]="select6";
function buscarEnArray(array, dato)
{
// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
var x=0;
while(array[x])
{
if(array[x]==dato) return x;
x++;
}
return null;
}
function cargaContenido(idSelectOrigen)
{
// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
// Obtengo el select que el usuario modifico
var selectOrigen=document.getElementById(idSelectOrigen);
// Obtengo la opcion que el usuario selecciono
var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
if(opcionSeleccionada==0)
{
var x=posicionSelectDestino, selectActual=null;
// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
while(listadoSelects[x])
{
selectActual=document.getElementById(listadoSelects[x]);
selectActual.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opción...";
selectActual.appendChild(nuevaOpcion); selectActual.disabled=true;
x++;
}
}
// Compruebo que el select modificado no sea el ultimo de la cadena
else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
{
// Obtengo el elemento del select que debo cargar
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById(idSelectDestino);
// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
var ajax=nuevoAjax();
ajax.open("GET", "cons_sel.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
// Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
selectDestino.length=0;
var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;
}
if (ajax.readyState==4)
{
selectDestino.parentNode.innerHTML=ajax.responseText;
}
}
ajax.send(null);
}
}
Bueno, basicamente estos son los cripts que uso para realizar estas operaciones, pero como les dije, no quiero guardar los ids sino los nombres de las opciones, pero nose que cambiar. Espero su ayuda.. Saludos
