Obtener la última opción seleccionada de un select multiple

[Nexus_6]

Muy buenas,
llevo varios días dándole vueltas a un problema y no consigo dar con ninguna solución.
Tengo un formulario con varios select multiples de este estilo:

Código HTML:

<select id="talla" name="talla[]" multiple onchange="getLatest('talla')">
  <option value="todo" selected>Todo</option>
  <option value="S">Pequeño</option>
  <option value="M">Mediano</option>
  <option value="L">Grande</option>
</select> 

La idea es que cuando se seleccione alguna de las opciones que no sea "Todo", dichas opciones se vayan acumulando, pero si se vuelve a seleccionar "Todo", automáticamente se quita la selección de todo lo demás y se quede seleccionado únicamente "Todo" como al inicio.

Código:

function getLatest (id) {
	var latest_value = $('#'+id).closest('select').find('option').filter(':selected:last').val();

}

Lo único que se me ocurre es intentar obtener la última opción seleccionada, pero sólo consigo obtener la última opción en posición, no la última "temporalmente" hablando.

Si alguien me puede echar una mano o dar alguna idea os lo agradecería.

Un saludo

[Alexis88]

Puedes solucionar esto sin necesidad de echar mano de alguna librería.

Código Javascript:

var select = document.getElementById("talla"), //El combo
    p = document.getElementsByTagName("p")[0], //Un párrafo en el que mostraré los datos
    valores = []; //El array en el que iré agrupando a los valores que seleccione
 
select.addEventListener("click", function(e){
    var actual = e.target.value,
        posicion = valores.indexOf(actual);
      
    if (actual == "todo" || this.value == "todo"){
        Array.prototype.forEach.call(this.options, function(opcion){
            if (opcion.value != "todo")
                opcion.selected = false;
        });
        valores.splice(0);
    }
    else
        if (posicion > -1)      
            valores.splice(posicion, 1);
        else
            valores.push(actual);
  
    p.innerHTML = "Valor actual: " + this.value + "<br />";
    p.innerHTML += "Seleccionado: " + actual + "<br >";
    p.innerHTML += "Valores: " + valores;
}, false);
 

Cada vez que de un clic en el combo, tomo el valor del elemento al que le he dado el clic, en este caso, una de las opciones, además, busco la posición que ocupe el valor seleccionado dentro del array en el que iré albergando a los valores que seleccione. Hago esto para saber si el elemento ya ha sido seleccionado previamente; ya con esta información, puedo realizar otras acciones más adelante.

Si el valor seleccionado o el valor actual del combo es igual a "todo", es decir, a la primera opción, quito la selección a todas las opciones del combo excepto a la que tenga el valor "todo", además, elimino a todos los datos del array, si es que hubieran. Caso contrario, es decir, si selecciono una de las demás opciones, evalúo el valor de la posición obtenida inicialmente. Si esta es mayor a -1, es decir, si el valor que acabo de seleccionar ya existe en el array, lo elimino, caso contrario, lo añado al array.

Finalmente, muestro toda la información recopilada en un párrafo. La ventaja de hacerlo de esta forma, es que ya no es necesario utilizar la tecla Ctrl para seleccionar más de un valor y almacenarlo en el array.

Nota: La evaluación que hago del valor del combo (this.value) es para que cuando inicialmente selecciones un valor utilizando la tecla Ctrl, se cumpla la condición de que si la primera opción del combo se encuentra seleccionada, se eliminen los valores seleccionados del combo.



Saludos