Question

Necesito crear un formulario en un wordpress en el que se haya de relacionar cada opcion de un grupo A con otra de un grupo B, de manera que quede emparejada cada opción una unica vez, pero no se como hacerlo, ya que no encuentro ningun plugin que me permita hacerlo.

Answer 1

Te pongo dos alternativas:

Una posibilidad es el elemento Sortable de jQuery UI. Permite crear elementos que se pueden arrastrar con el ratón para ser reordenados. Si te fijas en el ejemplo de connect list puedes hacer dos pilas de elementos para que el usuario las ordene dejando las del grupo A a un lado y las del B al otro.

Como este componente no resuelve directamente tu problemática desde JS deberías validar que el usuario no mezcla elementos de diferentes grupos en la misma columna. Una vez haya terminado la ordenación también tendrás que rescatar el resultado antes de que abandone la página (por ejemplo, con un botón guardar que llame a la función que hayas preparado para "leer" el resultado de la ordenación).

La pega de esta solución es tener que instalar todo el Framework jQuery UI sólo para utilizar este componente y que además te tocará pelearte con las validaciones.

---

Otro tipo de solución más artesanal es hacer un formulario HTML con tantos select como elementos A tengas. Al cargar la página los valores posibles de todos los select serán todos los elementos B.

Deberías hacer una validación con JS cada vez que el usuario cambia el valor seleccionado de uno de los desplegables y hacer que el resto actualizan sus posibles valores seleccionables. Con cada cambio se debería añadir la opción que quedó libre y quitar la elegida en el resto de desplegables.

Editado: añado un código de ejemplo para la segunda opción.

HTML:

<form action="" method="post" id="myForm">
    <ul>
        <li id="li_A1">
            <label for="input_A1"> Elemento A1 </label>        
            <select id="input_A1" class="validar">
                <option value=""></option>
                <option value="Opcion B1">Opcion B1</option>
                <option value="Opcion B2">Opcion B2</option>
                <option value="Opcion B3">Opcion B3</option>
                <option value="Opcion B4">Opcion B4</option>
            </select>
        </li>
        <li id="li_A2">
            <label for="input_A2"> Elemento A2 </label>        
            <select id="input_A2" class="validar">
                <option value=""></option>
                <option value="Opcion B1">Opcion B1</option>
                <option value="Opcion B2">Opcion B2</option>
                <option value="Opcion B3">Opcion B3</option>
                <option value="Opcion B4">Opcion B4</option>
            </select>
        </li>
        <li id="li_A3">
            <label for="input_A3"> Elemento A3 </label>        
            <select id="input_A3" class="validar">
                <option value=""></option>
                <option value="Opcion B1">Opcion B1</option>
                <option value="Opcion B2">Opcion B2</option>
                <option value="Opcion B3">Opcion B3</option>
                <option value="Opcion B4">Opcion B4</option>
            </select>
        </li>
        <li id="li_A4">
            <label for="input_A4"> Elemento A4 </label>        
            <select id="input_A4" class="validar">
                <option value=""></option>
                <option value="Opcion B1">Opcion B1</option>
                <option value="Opcion B2">Opcion B2</option>
                <option value="Opcion B3">Opcion B3</option>
                <option value="Opcion B4">Opcion B4</option>
            </select>
        </li>
    </ul>
</form>

Javascript:

$("select.validar").change(function() {
    // Habilitar todo:    
    $("#myForm option").removeAttr('disabled');
    // Deshabilitar los elegidos:
    for (var id = 1; id <= 4; id++) {
        valor = $("#input_A"+id).val();
        if (valor != '') {
            for (var j = 1; j <= 4; j++) {
                if (j != id) {
                    $("#input_A"+j+" option[value='"+valor+"']").attr('disabled','disabled');
                }
            }
        }
    }  
});

Ejemplo de funcionamiento: http://jsfiddle.net/y9QtK/3/