Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Los Famosos Select Dependientes

Estas en el tema de Los Famosos Select Dependientes en el foro de Frameworks JS en Foros del Web. Hola, en primer lugar Felicidades por el foro, como veran hace muchoooooo soy user pero no posteo mucho porque todo es muy claro aca. MI ...
  #1 (permalink)  
Antiguo 13/06/2008, 07:24
 
Fecha de Ingreso: mayo-2006
Mensajes: 45
Antigüedad: 17 años, 11 meses
Puntos: 0
Los Famosos Select Dependientes

Hola, en primer lugar Felicidades por el foro, como veran hace muchoooooo soy user pero no posteo mucho porque todo es muy claro aca.

MI CONSULTA:

Use los selct Anidados del sitio http://www.formatoweb.com.ar/ajax/select_dependientes_3_niveles.php y lo hice de 4 niveles y me funciono de 10.

Ahora el problema es el siguiente, como veran en esa Web en el ejemplo cuando uno selecciona Opcion1 se activa Opcion2, luego seleccionamos Opcion2 y se activa Opcion3. Pero si luego de eso Seleccionamos otra Opcion1 se modifica solo Opcion2 y la 3 no se pone en Elije Opcion. Esto me esta generando problemas ya que los puse en una Web que envia Post a otra y con los datos de los 4 menus hace una busqueda.


Necesito si porfavor me dan una manito de como hacer que cuando un menu se modifique todo lo posterior tambien se modifique. Dejo los codigos q utilizo. Desde ya muchas Gracias.


Este es mi arqchivo select_dependientes_3_niveles_proceso.php
<?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(
"provincia"=>"provincia",
"municipio"=>"municipio",
"localidad"=>"localidad",
"barrio"=>"barrio"
);

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 'conexion.php';
conectar();
$consulta=mysql_query("SELECT id, nombre FROM $tabla WHERE relacion='$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'>Elige</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>";
}
?>
-------------------------------------

Este es el Ajax que no entiendo nada de nada

select_dependientes_3_niveles.js

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]="provincia";
listadoSelects[1]="municipio";
listadoSelects[2]="localidad";
listadoSelects[3]="barrio";

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(idSelectOrige n);
// 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(listadoSelect s[x]);
selectActual.length=0;

var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opci&oacute;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(idSelectDest ino);
// 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", "select_dependientes_3_niveles_proceso.php?select= "+idSelectDestino+"&opcion="+opcionSeleccionad a, 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.responseTe xt;
}
}
ajax.send(null);
}
}



--------------------------------------------
este es el que me genera el 1er Select y los demas

<?php
function generaProvincia()
{
include 'conexion.php';
conectar();
$consulta=mysql_query("SELECT idp, nombre FROM provincia");
desconectar();

// Voy imprimiendo el primer select compuesto por los paises
echo "<select name='provincia' id='provincia' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Elije</option>";
while($registro=mysql_fetch_row($consulta))
{
echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
}
echo "</select>";
}
?>

<table width="639" border="0" align="center">
<tr>
<th width="178" scope="col"><?php generaProvincia(); ?></th>
<th width="150" scope="col">

<select style="width:130px" disabled="disabled" name="municipio" id="municipio" >
<option value="0">Selecciona opci&oacute;n...</option>
</select></th>
<th width="150" scope="col">

<select style="width:130px" disabled="disabled" name="localidad" id="localidad" >
<option value="0">Selecciona opci&oacute;n...</option>
</select></th>
<th width="150" scope="col">
<select style="width:130px" disabled="disabled" name="barrio" id="barrio" >
<option value="0">Selecciona opci&oacute;n...</option>
</select></th>
<th width="150" scope="col"><select style="width:130px" name="rubro" id="rubro">
<option value="0">Elije Rubro</option>
</select></th>
</tr>
</table>



Bueno espero me den una manito. En la web de donde saque el ejemplo estan los archivos Originales.

Graciasssssssssssssssss!!!!!!!11111
  #2 (permalink)  
Antiguo 13/06/2008, 08:05
 
Fecha de Ingreso: junio-2008
Mensajes: 93
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Los Famosos Select Dependientes

Yo he usado este mismo código para mi menú de tres niveles y ahora me surgen dos problemas:

1. ¿Hay manera de que el segundo menú sólo se active si la opción elegida en el primero tiene "subopciones"?

2. No sé cómo recoger la id de la opción seleccionada.

Gracias
  #3 (permalink)  
Antiguo 13/06/2008, 08:16
 
Fecha de Ingreso: mayo-2006
Mensajes: 45
Antigüedad: 17 años, 11 meses
Puntos: 0
Respuesta: Los Famosos Select Dependientes

Para recoger las Ids de las opciones seleccionadas debes meter todo en un Formulario, luego cuando le das al boton enviar las envia como $_POST a la pagina que procesa los datos. El proceso es asi :

Suponiendo que tus menues se llamen: dia, mes, año donde el usuario elije cada opcion y da click en OK y envia el formulario ( los datos son enviados al otro archivo especificado en action="procesa.php" del form) el oOK hace q tu formulario envie $_POST['dia'], $_POST['mes'] y $_POST['año'] al archivo procesa.php. Alli en procesa.php asignas los valores recibidos a otras variables que utilizas en las consultas :

$dia =$_POST['dia']
$mes =$_POST['mes']
$año=$_POST['año']

y con esas trabajas.
  #4 (permalink)  
Antiguo 13/06/2008, 08:39
 
Fecha de Ingreso: mayo-2006
Mensajes: 45
Antigüedad: 17 años, 11 meses
Puntos: 0
Respuesta: Los Famosos Select Dependientes

Creo que en mi problema alguien que entienda AJAX podria localizar el problema por aca:

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(listadoSelect s[x]);
selectActual.length=0;

var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opci&oacute;n...";
selectActual.appendChild(nuevaOpcion); selectActual.disabled=true;
x++;
}
}
// Compruebo que el select modificado no sea el ultimo de la cadena


Pero yo no tengo ni idea.
  #5 (permalink)  
Antiguo 13/06/2008, 08:44
 
Fecha de Ingreso: junio-2008
Mensajes: 93
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Los Famosos Select Dependientes

Gracias, ya lo he solucionado, era un problema más absurdo, tenía una mayúscula donde no tocaba.
  #6 (permalink)  
Antiguo 16/06/2008, 16:33
 
Fecha de Ingreso: mayo-2006
Mensajes: 45
Antigüedad: 17 años, 11 meses
Puntos: 0
Respuesta: Los Famosos Select Dependientes

Hola, en primer lugar Felicidades por el foro, como veran hace muchoooooo soy user pero no posteo mucho porque todo es muy claro aca.

MI CONSULTA:

Use los selct Anidados del sitio http://www.formatoweb.com.ar/ajax/select_dependientes_3_niveles.php y lo hice de 4 niveles y me funciono de 10.

Ahora el problema es el siguiente, como veran en esa Web en el ejemplo cuando uno selecciona Opcion1 se activa Opcion2, luego seleccionamos Opcion2 y se activa Opcion3. Pero si luego de eso Seleccionamos otra Opcion1 se modifica solo Opcion2 y la 3 no se pone en Elije Opcion. Esto me esta generando problemas ya que los puse en una Web que envia Post a otra y con los datos de los 4 menus hace una busqueda.


Necesito si porfavor me dan una manito de como hacer que cuando un menu se modifique todo lo posterior tambien se modifique. Dejo los codigos q utilizo. Desde ya muchas Gracias.


Este es mi arqchivo select_dependientes_3_niveles_proceso.php
<?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(
"provincia"=>"provincia",
"municipio"=>"municipio",
"localidad"=>"localidad",
"barrio"=>"barrio"
);

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 'conexion.php';
conectar();
$consulta=mysql_query("SELECT id, nombre FROM $tabla WHERE relacion='$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'>Elige</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>";
}
?>
-------------------------------------

Este es el Ajax que no entiendo nada de nada

select_dependientes_3_niveles.js

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]="provincia";
listadoSelects[1]="municipio";
listadoSelects[2]="localidad";
listadoSelects[3]="barrio";

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(idSelectOrige n);
// 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(listadoSelect s[x]);
selectActual.length=0;

var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opci&oacute;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(idSelectDest ino);
// 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", "select_dependientes_3_niveles_proceso.php?sel ect= "+idSelectDestino+"&opcion="+opcionSeleccionad a, 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.responseTe xt;
}
}
ajax.send(null);
}
}



--------------------------------------------
este es el que me genera el 1er Select y los demas

<?php
function generaProvincia()
{
include 'conexion.php';
conectar();
$consulta=mysql_query("SELECT idp, nombre FROM provincia");
desconectar();

// Voy imprimiendo el primer select compuesto por los paises
echo "<select name='provincia' id='provincia' onChange='cargaContenido(this.id)'>";
echo "<option value='0'>Elije</option>";
while($registro=mysql_fetch_row($consulta))
{
echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
}
echo "</select>";
}
?>

<table width="639" border="0" align="center">
<tr>
<th width="178" scope="col"><?php generaProvincia(); ?></th>
<th width="150" scope="col">

<select style="width:130px" disabled="disabled" name="municipio" id="municipio" >
<option value="0">Selecciona opci&oacute;n...</option>
</select></th>
<th width="150" scope="col">

<select style="width:130px" disabled="disabled" name="localidad" id="localidad" >
<option value="0">Selecciona opci&oacute;n...</option>
</select></th>
<th width="150" scope="col">
<select style="width:130px" disabled="disabled" name="barrio" id="barrio" >
<option value="0">Selecciona opci&oacute;n...</option>
</select></th>
<th width="150" scope="col"><select style="width:130px" name="rubro" id="rubro">
<option value="0">Elije Rubro</option>
</select></th>
</tr>
</table>



Bueno espero me den una manito. En la web de donde saque el ejemplo estan los archivos Originales.

Graciasssssssssssssssss!!!!!!!11111
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 14:59.