mostrar input segun select multiple

[andoencombi]

Hola foro, el problema que tengo es el siguiente, resulta que tengo un select multiple de paises ya que requiero que puedan seleccionar varios paises, pero necesito tener un select de estados(solo de mexico) el cual se encontrara oculto y aparecera hasta cuando seleccione la opcion de mexico en el select multiple y si quito la opcion de mexico vuelva a desaparecer el select de estados el codigo que tengo es este

formulario.php

Código PHP:

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

y el codigo para ocultar el select de estado es este

Código PHP:

  /*Estado*/ 
 
    if ($('input[name=paises]:selected').val() == "MX" ){ 
 
    } else { 
        $(".ocultoestado").css("display","none"); 
    } 
 
    $(".clasestado").click(function(){ 
        if ($('input[name=paises]:selected').val() == "MX" ) { 
            $(".ocultoestado").slideDown("fast"); //Slide Down Effect 
        } else { 
            $(".ocultoestado").slideUp("fast");  //Slide Up Effect 
        } 
    });  
   

pero no me funciona, al inicio si oculta el estado, pero cuando selecciono mexico no lo muestra, alguien me puede ayudar con este codigo??

[Alexis88]

Esto es más sencillo de lo que crees (y sin usar jQuery).

Código Javascript:

var opciones = document.getElementsByName("paises[]")[0],
    mexico = document.getElementById("selectestado");
 
opciones.addEventListener("click", function(){
    mexico.style.display = this.value == "MX" ? "block" : "none";
}, false);
 

Como no asignas un Id al combo de los países, lo tomo por su nombre, mientras que al de los Estados de México lo tomo por su Id. Cuando seleccione una de las opciones del combo de países con un clic, se verificará el valor que se ha tomado, si es igual a "MX", se muestra el combo de los Estados de México, caso contrario, se lo oculta.

DEMO

Saludos

[andoencombi]

Muchas gracias Alexis88, ahora otro problema, si elijo mexico y otro pais me oculta el select de estado, habra alguna forma de que si selecciono mas de 1 pais (obvio que alguno sea mexico) me siga mostrando el select de estado??

[Alexis88]

Es que eso no tiene sentido, se supone que eliges un país de la lista para seleccionar uno de sus Estados, a menos que pretendas hacer algo que no has explicado. Por favor, te insto a que nos brindes la información completa acerca de lo que quieres hacer para así poder ayudarte.

Saludos

[andoencombi]

Lo que requiero es que el campo de estado aparesca cuando hayas seleccionado la opcion de mexico, aun cuando hayas seleccionado otros paises, por eso es que pongo un select multiple, si selecciono solo paises extranjeros no aparecera el select de estado

[Alexis88]

En ese caso, tendrías que hacerlo así:

Código Javascript:

var opciones = document.getElementsByName("paises[]")[0],
    mexico = document.getElementById("selectestado");
 
opciones.addEventListener("click", function(){
    if (this.value == "MX")
        mexico.style.display = "block";
}, false);
 

DEMO

Cuando selecciones la opción MX, se muestra la lista de Estados de México y si seleccionas otra opción, simplemente sigue todo igual.

Saludos

[andoencombi]

A ver va de nuevo el problema:

Tengo una lista con diferentes paises, y otra lista con estados solamente de mexico, en la lista de paises puedo seleccionar varias opciones, por default una lista de estados de mexico estara oculta, esta se mostrara cuando seleccione la opcion de mexico (MX) y se debera de ocultar si quito la opcion de mexico (MX).

Estaba pensando algo como a la opcion de mexico ejecutar una funcion y la funcion que detecte si esta haciendo selected o esta deseleccionando y en base a eso le aplique un style block o estyle none al select de estados

Código PHP:

  <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" onclick="ejecutar_funcion()">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>  
   

[Alexis88]

Debiste explicarlo así desde un inicio. Para ese caso, puedes utilizar un array en el cual irás añadiendo los valores que selecciones, si le das clic nuevamente al elemento que previamente seleccionaste, éste se des-selecciona y se retira del array, caso contrario, se añade. Luego, buscas en el array el elemento "MX" que corresponde con el valor de la opción "México", de estar presente, se muestra la lista de Estados de México, caso contrario, estará oculta.

Código Javascript:

var opciones = document.getElementsByName("paises[]")[0],
    mexico = document.getElementById("selectestado"),
    s = []; //Valores seleccionados
 
opciones.addEventListener("click", function(e){
    var valor = e.target.value, //Valor seleccionado
        i = s.indexOf(valor); //Posición del valor en el array, si es que está
    
    if (i > -1) //Cuando un valor no está en el array, la función indexOf devuelve -1
        s.splice(i, 1); //Retiramos el valor seleccionado
    else
        s.push(valor); //Añadimos el valor seleccionado
    
    mexico.style.display = s.indexOf("MX") > -1 ? "block" : "none";
}, false);
 

DEMO

Saludos

[andoencombi]

Gracias Alexis88 eso es lo que necesitaba, sabes nadamas otro ultimo detalle ojala y me puedas seguir ayudando, si mi primer opcion es mexico y seleciono otro pais sin pulsar la tecla de control, no me oculta a los estados de mexico y si selecciono otra vez mexico pulsando la tecla de control me oculta los estados. habra forma de corregir esto??

Ojala y me haya explicado