JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var select = document.getElementById("talla"),
    p = document.getElementsByTagName("p")[0],
    valores = [];

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);