JSFiddle - React, Tailwind, and code Playground

HTML

<select multiple="multiple" name="paises[]"> 
    <option class="clasestado" value="AF">Afganistan</option> 
    <option class="clasestado" value="AL">Albania</option> 
    <option class="clasestado" value="DE">Alemania</option>
    <option class="clasestado" value="AD">Andorra</option> 
    <option class="clasestado" value="AO">Angola</option> 
    <option class="clasestado" value="MX">Mexico</option> 
</select> 

<select class="ocultoestado" id="selectestado" name="estados"> 
    <option value="Aguascalientes">Aguascalientes</option> 
    <option value="Baja California">Baja California</option> 
    <option value="Baja California Sur">Baja California Sur</option> 
    <option value="Campeche">Campeche</option> 
</select>

CSS

.ocultoestado{
    display: none;
}

JavaScript

var opciones = document.getElementsByName("paises[]")[0],
    mexico = document.getElementById("selectestado"),
    s = []; //Valores seleccionados

opciones.addEventListener("click", function(e){
    var valor = e.target.value,
        i = s.indexOf(valor);
    
    if (i > -1)
        s.splice(i, 1);
    else
        s.push(valor);
    
    mexico.style.display = s.indexOf("MX") > -1 ? "block" : "none";
}, false);