Varios Selects relacionados

bienpiyao · #1 (**permalink**) 04/12/2010, 10:38

Hola gente,

Tengo un problema desde hace tiempo y estoy ya harto de mirar en google/foros españoles/foros ingleses...por eso busco su ayuda.

Estoy desarrollando una aplicación la cual, entre otras muchas cosas, tiene una especie de "equipo de la jornada". En ella, se carga un campo de fútbol con un formulario que acoge 11 selects (uno por posición). Imaginemos que la táctica es un 4-4-2. Al usuario se le dará la opción de tener un número de jugadores disponibles para elegir que variará cada semana. Por ejemplo:

8 defensas de entre los que escoger 4.
6 medios de entre los que escoger 4.
4 delanteros de entre los que escoger 2.

Para el portero es muy sencillo, y no tengo este problema.

Centrémonos en los defensas:

Lo que intento es que, siempre que se pinche en un select cualquiera (recordar que tengo 4) y se elija un defensa, quiero que ese jugador que se eligió en el primer select, aparezca desactivado en los otros 3 y no pueda ser elegido por razones obvias. Del mismo modo, que si en elijo en el select 1 y 2, esos 2 jugadores no aparezcan en el 3 y 4. Hablando en plata, que no pueda elegir 2 veces el mismo jugador.

He mirado miles de ejemplo de selects anidados, pero no es mi caso, ya que todo se crea dinámicamente y con los datos cogidos de la misma tabla, por lo que, hablando otra vez en plata, cojo la misma info 4 veces, así que no me vale, que, dependiendo de lo elegido en el primer select, me cargue el segundo, y sucesivos.

Además, como hay más de 1 táctica a usar, dependiendo de la que se elija, se carga un formulario u otro con distintas distribuciones de selects. Ésto lo hago con AJAX, por lo que, el script que estoy usando (cortesía de un amigo) funciona perfectamente cuando lo llamo directamente a él en cualquier parte de la web en la que NO esté usando AJAX, sin embargo, al incrustarlo en la capa que se recarga con AJAX la función JAVASCRIPT deja de funcionar.

RESUMIENDO:

4 selects que se cargan al mismo tiempo con AJAX y en los que se muestra la misma info: 8 opciones diferentes cogidas de la misma tabla. A la hora de seleccionar 1 deben estar desactivadas aquellas opciones que ya se eligieron antes en otro/s select/s.

Alguna idea o ayuda?

Muchísimas gracias de antemano y espero que haya quedado claro mi problema. Si alguien es tan amable de tratar de ayudarme y no entiende algo o no tiene algo claro, por favor, preguntar y trato de explicarlo mejor.

Gracias!!

maycolalvarez · #2 (**permalink**) 04/12/2010, 15:54

¿no es más simple que primero muestres solo un select, luego de que el usuario elija, llenes otro select pero con modalidad múltiple, y vuelvas a recargar el primero pero eliminando las opciones elegidas, y si haces cien en el múltiple, se elimine esa opción y recargues de nuevo el primero?.

es cuestión de interfaz, solo concentrarte y trata de dar lógica al requerimiento sin volverlo complicado.

bienpiyao · #3 (**permalink**) 05/12/2010, 03:39

Cita:

Iniciado por maycolalvarez

¿no es más simple que primero muestres solo un select, luego de que el usuario elija, llenes otro select pero con modalidad múltiple, y vuelvas a recargar el primero pero eliminando las opciones elegidas, y si haces cien en el múltiple, se elimine esa opción y recargues de nuevo el primero?.

es cuestión de interfaz, solo concentrarte y trata de dar lógica al requerimiento sin volverlo complicado.

Hola! Gracias por tu comentario.

Lo pensé, pero no me serviría, ya que, esa alineación se guardará y la próxima vez que el usuario entre a esta sección, se cargará directamente la alineación que está guardada, de este modo, si esa semana, sólo quiere cambiar un jugador porque esté sancionado o lesionado, pueda hacerlo sin necesidad de tocar todo lo demás. El caso, es que el script que tengo para esto funciona a la mil maravillas si pongo un link en el menú que lo llame, pero si lo integro con AJAX, deja de funcionar, así que es muy probable (estoy seguro) de que tengo que hacer algo más para que el JAVASCRIPT me funcione con AJAX.

Te dejo el código del JAVASCRIPT empleado (en realidad es muy sencillo):

Código HTML:

<html>
	<head>
		<script type="text/javascript">		
			function loadColors() {	
				for (i = 0;i < document.test.elements.length;i++) {
					for (j = 0;j < document.test.elements[i].options.length;j++) {
						document.test.elements[i].options[j].disabled = false;
						for (k = 0;k < document.test.elements.length;k++) {
							if (i != k) {
								if (document.test.elements[i].options[j].text == document.test.elements[k].options[document.test.elements[k].selectedIndex].text)
									document.test.elements[i].options[j].disabled = true;								
							}
						}		
					}
				}				
			}										
		</script>
	</head>
		<form name="test" action="" method="">
			<select name="opcion1" onChange="loadColors();">
				<option selected="true" value="1">Rojo</option> 
				<option value="2">Verde</option> 
				<option value="3">Azul</option>
				<option value="4">Amarillo</option> 
			</select> 
			<select name="opcion2" onChange="loadColors();">
				<option value="1">Rojo</option> 
				<option selected="true" value="2">Verde</option> 
				<option value="3">Azul</option>
				<option value="4">Amarillo</option> 
			</select> 
			<select name="opcion3" onChange="loadColors();">
				<option value="1">Rojo</option> 
				<option value="2">Verde</option> 
				<option selected="true" value="3">Azul</option>
				<option value="4">Amarillo</option> 
			</select> 					
		</form>
	</body>
</html>

Como ves, está hecho para colores, pero cambié los nombres de los colores por nombres de futbolistas, y obviamente, funciona igual. El problema es que, este JAVASCRIPT se debe ejecutar en una capa que se carga con AJAX, es decir, en una parte de la web, no en toda la web. Así que, imagina que tengo la index.php, que se carga al principio, y cada vez que pulso en el botón para elegir una táctica, me carga sólo una capa con dicha táctica, pero sigo estando en index.php. En este caso, mi JAVASCRIPT NO funciona :(.

Mil gracias por tu ayuda.

SaludoS!!