[SOLUCIONADO] Menu select en html

[tamaki094]

Lo que pasa es que con un menu/lista en HTML quiero hacer una lista de 5 paises,ahora lo que quiero hacer es que al presionar algun pais, abajo aparesca otro menu con los Estados de acuerdo a ese pais, y asi con cada pais tenga sus respectivos menus con sus estados, pero no que todos aparescan al mismo tiempo, que solo aparesca el correspondiente al pais seleccionado.

NO SE SI SE PUEDA CON PURO HTML O TAMBIEN PHP



<select name="select">
<option value="value1">MEXICO</option>
<option value="value2" selected>ECUADOR</option>
<option value="value3">ARGENTINA</option>
</select>

Y YA CON ESTE MENU AL PRESIONAR MEXICO ME APARESCA OTRO MENU CON LOS ESTADOS DE MEXICO
<select name="select">
<option value="value1">MICHOACAN</option>
<option value="value2" selected>OAXACA</option>
<option value="value3">GUANAJUATO</option>
</select>


Y ASI UN MENU PARA CADA PAIS CON SUS RESPECTIVOS ESTADOS.

GRACIAS

[fede5426]

Lo podes hacer con Jquery...

Código HTML:

<select name="select" id="principal">
   <option value=" " selected>---</option>
   <option value="mex">MEXICO</option>
   <option value="arg">ARGENTINA</option>
</select>
 
<select name="select" id="mexico">
   <option value="value1">MICHOACAN</option> 
   <option value="value2" selected>OAXACA</option>
   <option value="value3">GUANAJUATO</option>
</select>
 
<select name="select" id="argentina">
   <option value="value1">MENDOZA</option> 
   <option value="value2" selected>CORDOBA</option>
   <option value="value3">SALTA</option>
</select>
 

Código CSS:

#mexico,
#argentina{
    display:none;
}
 

Código Javascript:

$("#principal").change(function(){
    var valor = $("#principal option:selected").val();
        if(valor == "arg"){
            $("#argentina").fadeIn();
            $("#mexico").hide();
        }
        else if(valor == "mex"){
            $("#argentina").hide();
            $("#mexico").fadeIn();
        };
});
 

http://codepen.io/fede5426/pen/RPQebQ

Saludos

[tamaki094]

MUCHAS GRACIAS