Ver Mensaje Individual
  #7 (permalink)  
Antiguo 30/03/2015, 19:31
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Ocultar y mostrar campos via select

A ver, vamos por partes.

Lo que te decía con respecto a los estilos (CSS), es que desde una hoja de estilos, ocultes a ambos <div> mediante la propiedad display, asignándole el valor none, luego, en la misma hoja de estilos, crea una clase que tendrá como única propiedad a display pero con el valor block, de esta manera, cuando selecciones una opción del <select>, tomas al <div> que corresponda y le aplicas dicha clase, además, buscas al <div> que ya posea dicha clase, es decir, al que haya sido seleccionado previamente.

Como añadido, la primera opción, que es la que no tiene valor, al ser seleccionada, debe de ocultar al <div> que sea visible en ese momento, por lo que el script sería así:

Código Javascript:
Ver original
  1. //La variable en la que guardaré al elemento que posea la clase 'visible'
  2. var visible;
  3.  
  4. //Ejecuto una función cuando elija una opción del <select>
  5. document.querySelector("#elige").addEventListener("change", function(){
  6.    
  7.     //Tomo al <div> que posea la clase 'visible'
  8.     visible = document.querySelector(".visible");
  9.  
  10.     //Si el valor de la opción seleccionada contiene uno o más caracteres
  11.     if (this.value.length){
  12.         //Verifico si hay al menos un <div> con la clase 'visible'
  13.         if (visible.length){
  14.             //De haberlo, le quito dicha clase
  15.             visible.className = "";
  16.         }
  17.         //Luego, tomo al <div> cuyo id corresponda con el de la opción seleccionada y le asigno la clase 'visible'
  18.         document.querySelector("#" + this.value).className = "visible";
  19.     }
  20.  
  21.     //Si el valor de la opción seleccionada no contiene caracteres (está vacía)
  22.     else{
  23.         //Verifico si hay al menos un <div> con la clase 'visible'
  24.         if (visible.length){
  25.             //De haberlo, le quito dicha clase
  26.             visible.className = "";
  27.         }
  28.     }
  29. }, false);

Y, por favor, cuando muestres código, utiliza el highlight que corresponda, así será más fácil leer tu código. Puedes seleccionarlo desde el <select> que aparece justo arriba del área de texto en el que escribes tus respuestas.



No te olvides de asignar los id de los <div> a las dos últimas opciones del <select>, tal y como te lo expliqué en mi respuesta anterior.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand