Se me ocurre una solución, pero antes de dártela, si vas a pasar datos de un
<select> a otro para enviar solo lo que están en el segundo
<select>, ¿por qué no mejor envías lo que ya seleccionaste en el primero?
Edito: Independientemente de que soluciones tu problema enviando los datos seleccionados en el primer
<select>, creo que esto es lo buscas hacer:
Cada vez que des un clic al primer
<select> (de ahora en adelante, A), obtienes un array con las opciones que tiene el segundo
<select> (de ahora en adelante, B) y verificas si el valor de la opciones a la que le diste clic, existe o no en B. De estar presente, lo eliminas, caso contrario, creas una opción, tomas el contenido de la opción de A a la que le diste el clic, se lo asignas a la opción creada, además de asignarle a esta nueva opción el valor de la opción seleccionada y la adhieres a B.
Estos son los métodos que utilicé:
- Array.prototype.map: Crea un array a partir de una lista de datos que se le pase como primer parámetro, asignando a cada uno de estos al nuevo array con la función que se le pasa como segundo parámetro.
- event.target: Devuelve el objeto al cual se le aplicó el evento en cuestión, en este caso, el evento
click. - document.createElement: Crea un nuevo elemento HTML.
- removeChild: Remueve un elemento, indicado entre paréntesis, del elemento al que se hace referencia.
- appendChild: Agrega un nuevo elemento, indicado entre paréntesis, al final del elemento al que se hace referencia.
Saludos