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

Selects dependientes

Estas en el tema de Selects dependientes en el foro de Frameworks JS en Foros del Web. Hola gente, Tengo un problema desde hace bastante tiempo con un script de selects dependientes. He ido mejorándolo pero no acaba de salirme. He utilizado ...
  #1 (permalink)  
Antiguo 18/02/2011, 14:38
 
Fecha de Ingreso: agosto-2009
Mensajes: 216
Antigüedad: 14 años, 8 meses
Puntos: 3
Selects dependientes

Hola gente,

Tengo un problema desde hace bastante tiempo con un script de selects dependientes. He ido mejorándolo pero no acaba de salirme.

He utilizado el ejemplo de 3 selects dependientes que hay en http://www.formatoweb.com.ar/ajax/se..._3_niveles.php

Pero no es exactamente lo que necesito. Yo necesito, que teniendo 4 selects con las mismas opciones en ellos (es decir, el mismo select 4 veces) no se puedan repetir las selecciones. Es decir, que si tengo un select con las opciones: a, b, c, d, e, f y g, por ejemplo, no pueda seleccionar 2 o más veces la misma opción en esos 4 selects.

Hasta ahora he conseguido que no se pueda seleccionar la misma opción que se elegió en el inmediatamente anterior al actual, es decir:

Select 1: A
Select 2: (no puedo elegir A porque no aparece ---> BIEN!), elijo B
Select 3: (no puedo elegir B porque no aparece---> BIEN!!/ puedo elegir A porque aparece ----> MAL!!!).

Eso es lo que me pasa ahora mismo y no logro solucionarlo. Os dejo el código a ver si alguno de ustedes me puede ayudar.

Ajax que se encarga del meollo (sacado de la web de arriba):

Código HTML:
// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="d1";
listadoSelects[1]="d2";
listadoSelects[2]="d3";
listadoSelects[3]="d4";

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", "select_dependientes_proceso.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);
	}
}
Script que realiza lo gordo del proceso (sacado tmb de la web de arriba pero adaptado a mi código):

Código 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(
"d1"=>"plantillas",
"d2"=>"plantillas",
"d3"=>"plantillas",
"d4"=>"plantillas"
);

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 
'funciones.php';
    
$conexion bd();
    
    
$sql "SELECT jugador
            FROM plantillas
            WHERE jugador != '"
.$opcionSeleccionada."'
            AND tipo = 'b'"
;
            
    
$res mysql_query($sql);
    
    
// Comienzo a imprimir el select
    
echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
    echo 
"<option value='0'>Elige</option>";
    while(
$row=mysql_fetch_array($res))
    {
    
        
$s "SELECT nombre
              FROM jugadores
              WHERE id = '"
.$row["jugador"]."'";
              
        
$r mysql_query($s);
        
$f mysql_fetch_array($r);
        
        
// Imprimo las opciones del select
        
echo "<option value='".$row["jugador"]."'>".$f["nombre"]."</option>";
    }            
    echo 
"</select>";
}
?>
La página php donde se debe mostrar todo y que llama a éstas dos anteriores:

Código PHP:
 <div id="def1" align="center">
                                        <select name="d1" id="d1" onChange="cargaContenido(this.id)">
                                        <option value="0">Elige</option>
    <?php
                                        
                    $sql2 
"SELECT jugador
                            FROM plantillas
                            WHERE usuario = '"
.$usuario."'";
                            
                    
$res2 mysql_query($sql2);
                    
$row2 mysql_fetch_array($res2);
                    
                    
$contador 0;
                    
                    while( 
$row2 mysql_fetch_array$res2 ) ) /*Mientras no lleguemos al último registro de la base de datos*/
                    
{
    
                        
$id $row2['jugador'];
                    
                        
/*Seleccionamos todos los nombre de los bloques*/
                                
                        
$sql1 "SELECT nombre 
                                FROM jugadores 
                                WHERE id = '"
.$id."'
                                AND demarcacion = 'Defensa'"
;
                                
                        
$res1 mysql_query($sql1);        
                                        
                        
mysql_data_seek$res1); /*Colocamos el puntero interno al principio de los registros de la base de datos para ir leyéndolos en orden                                                                                            desde el principio*/
                                          
                        
while( $row1 mysql_fetch_array$res1 ) ) /*Mientras no lleguemos al último registro de la base de datos*/
                        
{
                        
                            
                            
$contador++;

?>

                    <option value="<?php echo ($id?>">
                            <?php echo( $row1["nombre"] )?>                </option>
          <?php
                     
                                                     
                    
}
                    }
                    
?>
                                        </select></div></td>
                              <td width="105"><label> </label>
                                    <div id="def2" align="center">
                                        <select disabled="disabled" name="d2" id="d2" onChange="cargaContenido(this.id)">
              
                                        </select>
                              </div></td>
                              <td width="105"><label> </label>
                                      <div id="def3" align="center">
                                        <select name="d3" id="d3" disabled="disabled" onChange="cargaContenido(this.id)">
                                        </select>
                              </div></td>
                              <td width="94"><label> </label>
                                      <div id="def4" align="center">
                                        <select name="d4" id="d4" disabled="disabled" onChange="cargaContenido(this.id)"></select>
Alguna idea??

Gracias!!!
  #2 (permalink)  
Antiguo 19/02/2011, 21:03
 
Fecha de Ingreso: junio-2010
Ubicación: Venezuela, Zulia
Mensajes: 686
Antigüedad: 13 años, 9 meses
Puntos: 55
Respuesta: Selects dependientes

bueno te puedo decir que no lei nada de tu codigo, solo el principio y creo que una facil solucion es crear una tabla que guarde de forma temporal los resultados que haz escogido, luego al ir al otro select que este se cargue por medio de un while sacando los que ya estan en la tabla y asi sucesivamente.

es sencillo, yo se poco de ajax pero hace un par de dias hice 4 select dependientes muy parecido a lo que explicas
  #3 (permalink)  
Antiguo 20/02/2011, 04:25
 
Fecha de Ingreso: agosto-2009
Mensajes: 216
Antigüedad: 14 años, 8 meses
Puntos: 3
Respuesta: Selects dependientes

Cita:
Iniciado por johhan16 Ver Mensaje
bueno te puedo decir que no lei nada de tu codigo, solo el principio y creo que una facil solucion es crear una tabla que guarde de forma temporal los resultados que haz escogido, luego al ir al otro select que este se cargue por medio de un while sacando los que ya estan en la tabla y asi sucesivamente.

es sencillo, yo se poco de ajax pero hace un par de dias hice 4 select dependientes muy parecido a lo que explicas
Hola! En primer lugar, gracias por contestar.

Voy a probar lo que me comentas y ahora te digo qué tal fue.

Un saludo!
  #4 (permalink)  
Antiguo 20/02/2011, 04:44
 
Fecha de Ingreso: agosto-2009
Mensajes: 216
Antigüedad: 14 años, 8 meses
Puntos: 3
Respuesta: Selects dependientes

Hola, acabo de probarlo y no funciona correctamente.

Te explico. Cada vez que selecciono un valor de un select, cojo el id del elemento seleccionado y lo meto en una tabla temporal, para el siguiente, cojo todas las opciones disponibles menos las que hay en la tabla temporal. Esto funciona bien si hago los 4 selects en orden, es decir: 1-2-3-4. Pero si altero el orden, ya no sirve.

Me podrías explicar un poco cómo lo hiciste tú para tu página??

Muchas gracias.
  #5 (permalink)  
Antiguo 21/02/2011, 00:19
 
Fecha de Ingreso: junio-2010
Ubicación: Venezuela, Zulia
Mensajes: 686
Antigüedad: 13 años, 9 meses
Puntos: 55
Respuesta: Selects dependientes

exactamente que va dentro de los selects y de cuantas formas se puede usar, la verdad no entiendo porque no te funciona, porque si ya tienes en la tabla lo que no quieres mostrar en los otros select deberia funcionarte los coloques como los coloques
  #6 (permalink)  
Antiguo 21/02/2011, 04:26
 
Fecha de Ingreso: agosto-2009
Mensajes: 216
Antigüedad: 14 años, 8 meses
Puntos: 3
Respuesta: Selects dependientes

Cita:
Iniciado por johhan16 Ver Mensaje
exactamente que va dentro de los selects y de cuantas formas se puede usar, la verdad no entiendo porque no te funciona, porque si ya tienes en la tabla lo que no quieres mostrar en los otros select deberia funcionarte los coloques como los coloques
Pues no funciona, porque imagina que tengo 4 selects que muestran los colores que tengo en una base de datos. Imaginemos que tengo 5 colores: Rojo (R), Amarillo (A), Verde (V), Naranja (N) y Marrón (M).

Tengo que elegir 4 de esos 5 y no se pueden repetir. Si hago lo que me dijiste, y voy por orden, es decir, 1-2-3-4, funciona a la perfección, pero ahora imagina ésto:

En el 1º elijo R, meto R en la tabla temporal.
En el 2º elijo A, meto A en la tabla temporal, ya tengo A y R.
Ahora voy al select 1 y en lugar de R elijo N, meto N en la tabla temporal, tengo A, R y N.....pero ésto es incorrecto, porque ahora R no está seleccionado en ningún select y sin embargo no puedo elegirlo...Entiendes ahora lo que quiero decir?

Lo que quiero es total libertad para el usuario de cambiar los selects de la manera y cuantas veces quiera. Con javascript funciona a las mil maravillas de forma muy sencilla, pero al integrarlo en AJAX, no.

Gracias por tu tiempo y esfuerzo.
  #7 (permalink)  
Antiguo 24/02/2011, 20:00
 
Fecha de Ingreso: junio-2010
Ubicación: Venezuela, Zulia
Mensajes: 686
Antigüedad: 13 años, 9 meses
Puntos: 55
Respuesta: Selects dependientes

bueno tu mismo tienes la respuesta al problema solo que no logras verla.

yo en ese caso haria lo siguiente:

en la tabla crearia minimo 2 campos (num_select, color)
con esto cuando elija el select1 el color rojo guardaria el select1, color rojo

pero antes le diria que me revise si ya existe ingresado el select1, si esta ingresado entonces en vez de insertar un nuevo registro, que me actualice este de lo contrario lo inserte nuevo.

con esta simple cosita ya evitas eso que dices

espero que te sirva
  #8 (permalink)  
Antiguo 25/02/2011, 03:23
 
Fecha de Ingreso: agosto-2009
Mensajes: 216
Antigüedad: 14 años, 8 meses
Puntos: 3
Respuesta: Selects dependientes

Ey!! Gracias por la información. Al final me cansé de AJAX para esta parte de mi proyecto y lo sustituí por php. No queda igual de "bonito" pero funciona perfectamente sin complicaciones. De todos modos, tengo la espina clavada y lo apuntaré como futura mejora, así que me lo apunto. Muchas gracias.

Un saludo!

Etiquetas: ajax, dependientes, selects
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.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:11.