Una de las grandes cosas de la construcción de sitios web para la vida es que los desafíos tienden a cambiar de un día para otro. Siempre hay un nuevo rompecabezas para resolver.
Tomemos hoy, por ejemplo. Estaba creando una página que contenía una serie de cuadros de selección (desplegables). Ahora, he estado alrededor del bloque una o dos veces antes, y esta no fue la primera vez que usé los selectos. Sin embargo, esta implementación vino con un giro único: todas las casillas contenían exactamente las mismas opciones, pero solo queríamos que cada una pudiera seleccionarse una vez. Específicamente, cada caja contenía una lista de preguntas de seguridad: el apellido de soltera de la abuela de la mejor amiga de tu madre, ese tipo de cosas.
El código se ve algo como esto:
<select class = "security" name = "security1">
 <opción valor = "0"> Seleccione una pregunta. </option>
 <option value = "1"> ¿Quién es tu papá? </option>
 <option value = "2"> ¿Cuál es tu color favorito? </option>
 <opción valor = "3"> ¿Qué hora es? </option>
</select>
<select class = "security" name = "security2">
 <opción valor = "0"> Seleccione una pregunta. </option>
 <option value = "1"> ¿Quién es tu papá? </option>
 <option value = "2"> ¿Cuál es tu color favorito? </option>
 <opción valor = "3"> ¿Qué hora es? </option>
</select>
Ahora, naturalmente, queremos que el usuario seleccione varias preguntas de seguridad diferentes. Pero, ¿qué les impide seleccionar la misma pregunta varias veces? Bueno, en nuestro caso, la validación de back-end ... pero quería resolver el problema antes de llegar a ese punto. Quería eliminar las preguntas "seleccionadas" de todos los demás cuadros desplegables, por lo que ni siquiera sería una opción. Esto tiene el beneficio adicional de acortar la lista de opciones a medida que el usuario avanza, lo que facilitaría el escaneo de las opciones.
Después de jugar un poco, se me ocurrió el siguiente script de jQuery que parece hacer el truco:
$ (function () {
  $ ('. seguridad'). cambio (función () {
    $ ('. opción de seguridad'). show (0);
    $ ('. opción de seguridad: seleccionado'). cada (función () {
      oIndex = $ (este) .index ();
      if (oIndex> 0) {
        $ ('. seguridad'). cada (función () {
          $ (this) .children ('option'). eq (oIndex) .not (': selected'). hide (0);
        });
      }
    });
  });
  $ ('. seguridad'). cambio ();
});
Te guiaré a través de lo que estoy haciendo aquí.
Primero, estamos configurando el script para que se active cada vez que se cambien los cuadros de selección de "seguridad". En otras palabras, cada vez que alguien realiza una nueva selección en uno de nuestros menús desplegables.
Cuando se realiza una selección, lo primero que hacemos es volver a mostrar cualquier opción oculta previamente, para que podamos volver a la igualdad. Luego hacemos un bucle a través de cada una de las opciones seleccionadas en nuestros cuadros de selección. Si el primer elemento no está seleccionado, procederemos. (En nuestro caso de uso, la primera opción era una opción genérica de “selección”, por lo que no quería que contara como una pregunta).
Una vez que sepamos que se ha seleccionado una pregunta verdadera, recorreremos todos nuestros cuadros de selección. Estamos haciendo un uso intensivo de las funciones jQuery .index () y .eq () aquí. Ambas funciones utilizan la idea de indexación de matriz basada en cero para numerar todos nuestros elementos; la quinta opción en un menú desplegable tendría un índice de 4, el tercer menú desplegable con una clase de "seguridad" tendría un índice de 2, y así sucesivamente. La función .index () nos permite capturar el número de índice de cualquier elemento que ya tenemos, y la función .eq () nos permite especificar qué elemento nuevo queremos capturar.
Entonces, primero, tomamos el valor del índice de la opción seleccionada actualmente. Dado que todas nuestras preguntas están en el mismo orden en cada menú desplegable, esas preguntas tienen los mismos índices en todos los ámbitos. Luego hacemos un bucle a través de cada uno de nuestros cuadros de selección. Si la opción no está seleccionada actualmente en ese menú desplegable, la ocultamos; en otras palabras, el único menú desplegable que aún contendrá esa pregunta es en el que ya estaba seleccionada.
Y luego, al final, activamos nuestra función de cambio. La primera vez que se carga nuestra página, eso no hará mucho. Pero si alguien actualiza la ventana del navegador, el navegador guardará sus opciones de selección ... lo que significa que debemos filtrarlas justo cuando se carga la página. De lo contrario, todas nuestras preguntas serían visibles de nuevo cuando la página se vuelva a cargar.