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, 0 ); /*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!!!