Bienvenidos a Trocitos de programación


Bienvenidos a Trocitos de programación (En construcción)
Creo este blog para hacer como un pequeño repositorio de pequeños scripts o trocitos de código que he utilizado en algún momento y pueden ser útiles para otras personas o para mi mismo en algún momento.
Aclarar que no soy ningún experto en la materia ni mucho menos y que tampoco no todos los códigos estarán hechos por mi en su totalidad sino que igual en su momento busque una solución y encontre la solución completa o parcial.
(por esto pido comprensión si alguna vez alguien ve algun trocito que él mismo puso en algun foro ya que no puedo tener las fuentes de todas las cosas que he sacado de internet, si se diera el caso, el propietario que deje un comentario publicando su desaprobación de que yo publique ese contenido junto con un enlace al lugar en el que él lo publico, y mis más sinceras disculpas).

lunes, 16 de enero de 2012

Ocultar y mostrar div con javascript

Con este trocito de código podemos ocultar o mostrar un div u otro dependiendo el valor seleccionado en un select option de HTML, simplemente cambia la propiedad CSS del div(para ver este ejemplo usando JQuery visita esta entrada):
Ejemplo:
Nuestro numero de cuenta es: 000000000000000000000

Codigo HTML:

<div>
      <div>
           <SELECT NAME="pago" onChange="pagoOnChange(this)">
              <OPTION VALUE="transferencia">Transferéncia</OPTION>
              <OPTION VALUE="tarjeta">Pago con tarjeta</OPTION> 
           </SELECT>
      </div>
      <div id="nCuenta" style="display:none;">
           Nuestro numero de cuenta es: 000000000000000000000
      </div>
      <div id="nTargeta" style="display:;">
           <br>
           Numero*
           <br>
           <input type='text' name='nTarjeta'size='20' maxLength='60'>
           <br><br>
           Titular*
           <br>
           <input type='text' name='titularTarjeta'size='20' maxLength='60'>
           <br><br>
           Numero de seguridad*
           <input type='text' name='numeroSeguridad'size='3' maxLength='3'>
      </div>
</div>
Codigo Javascript:

function pagoOnChange(sel) {
      if (sel.value=="transferencia"){
           divC = document.getElementById("nCuenta");
           divC.style.display = "";

           divT = document.getElementById("nTargeta");
           divT.style.display = "none";

      }else{

           divC = document.getElementById("nCuenta");
           divC.style.display="none";

           divT = document.getElementById("nTargeta");
           divT.style.display = "";
      }
}
Bueno ahí lo dejo, seguro que hay alguna forma mejor o más optima pero yo lo resolví así, si alguien quiere poner un comentario explicando una forma mejor que no se vea cohibido puesto que la función de este blog es ayudar y mejorar en la medida de lo posible.

Un saludo.

33 comentarios :

  1. muchas gracias! tu ejemplo me sirvio mucho :)

    ResponderEliminar
  2. Está excelente el ejemplo, Gracias!

    ResponderEliminar
  3. Muchas Gracias de VERDAD tenia mas de 4 días tratando de hacer esto y no encontraba un buen ejemplo, gracias :)

    ResponderEliminar
  4. Excelente, Gracias por el aporte :D

    ResponderEliminar
  5. Muy bueno y sencillo. Muchas gracias!!!

    ResponderEliminar
  6. esta muy bien tu ejemplo, me sirvio de mucho.

    ResponderEliminar
  7. disculpa lo que pasa que tu codigo no esta funcionando soy nuevo en eto puedes ayudarmwe

    ResponderEliminar
    Respuestas
    1. Perdona la demora, ¿que és lo que no te funciona?. Si lo copias "tal cual" deberia funcionar, es más, encima del código tienes el ejemplo funcionando...

      Eliminar
  8. gracias amigo muy buen aporte, pero necesito tu ayuda, lo que pasa es que con el primer select list muestro otros select list dependiendo de la opción seleccionada del primero, de modo que con el segundo select list tenga que mostrar otro div de acuerdo a la opcion que seleccionen enel segundo select list, con tu codigo ya puedo mostrar el segundo select list pero no puedo adarptar la funcion para que con el select list que muestro, pueda mostrar otro div, agradeceria tu ayuda

    ResponderEliminar
  9. No, para hacer eso deberias crear una función para cada select ya que necesitas evaluar cada una de las opciones del nuevo select, o, en la función, primero hacer una serie de if (o switch) primero para identificar el select que estas tocando, y luego dentro dentro de cada uno de ellos otro If (o switch) para identificar el valor que estas seleccionando.
    Lo que si que se podria generalizar es lo que oculta uno y muestra otro creando una funcion donde le tienes que pasar por parámetro el que quieres mostrar, y el que quieres ocultar (o como es en tu caso, un array con los que quieres ocultar).

    Un saludo

    ResponderEliminar
  10. Gracias! el ejemplo esta muy ensillo y fácil de entender me ayudo mucho

    ResponderEliminar
  11. Excelente aportacion amigo ejemplo practico, secillo y sobre todo muy funcional.

    ResponderEliminar
  12. Muy bueno el ejemplo, pero una vez que seleccionas Pago con tarjeta, y volves a cargar la pagina, queda seleccionada la ultima opcion pero sin desplegar la misma.

    ResponderEliminar
    Respuestas
    1. Pue si, así es, el javascript es muy caprichoso y le pican cosas como esta, cosas parecidas sucenden cuando juegas con "Atrás" y "Siguiente" del navegador.
      Para prevenir esto que comentas habría que jugar con los eventos de la pagina y comprobar que elemento hay seleccionado o setearlo al primero, lo más común suele ser hacerlo en el onLoad del document

      Eliminar
  13. Muy buen el ejemplo excelente aportacion amigo!!!!!

    ResponderEliminar
  14. Excelente, fácil, sencillo, útil y adaptable.

    ResponderEliminar
  15. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  16. Simple y hermoso. Muchas Gracias!!

    ResponderEliminar
  17. Amigo muchas gracias, me ayudo mucho!

    ResponderEliminar
  18. Copie igual el codigo pero no me funciona....sale automaticamente el segundo DIV, y cuando cambio la seleccion recien me muestra :/

    ResponderEliminar
  19. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  20. He reescrito el comentario...
    Excelente, Muchas gracias, funciona a la perfección.
    Tengo una duda: ¿Cómo sería en el caso de que haya muchas opciones en el SELECT? Pongamos por ejemplo 50 opciones.
    Soy nuevo en javascript y estoy un poco perdido.
    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hace tiempo que no me dedico al desarrollo web, y diría que hay formas mucho más practicas de hacer esto, pero si lo quieres hacer en javascript puro, creo que lo más sencillo seria que los Values de cada option fueran un identificador por ejemplo un numero.
      Luego los DIV que quieras mostrar o ocultar meterolos todos dentro de otro DIV padre común para todos y ponerles un id tipo "modoPago1", "modoPago2"... donde el numero coincidiria con el Value de cada Option, entonces, al cambiar el valor del Select seria iterar por todos los hijos de ese padre en común y decirle si hijo.id == "modoPago"+sel entonces hijo.style.display == "" sino pues el "none"

      Eliminar
    2. Muchas gracias. justamente eso que dices: cada value con un numero. En mi caso lo llame 'Div01', etc y luego, show y hide.
      Muy agradecido. :)

      Eliminar
  21. Como lo puedo adaptar para mostrar imagenes?

    ResponderEliminar
    Respuestas
    1. Buenas tardes.
      Creo que da igual que sea texto o imágenes, ya que lo que muestras u ocultas el el div al completo, independientemente si ese div contiene texto o imagen.

      Eliminar
    2. Este código me funciona, espero que a ti también.
      [code]
      head>
      script>
      $(document).ready(function() {
      //Select para mostrar y ocultar divs.
      $("#select").on("change",function(){
      var select = "#"+$(this).val();
      $("#DivPai").children("div").hide();
      $("#DivPai").children(select).show();
      //Seleccionando 'div0', recarga la págoina y muestra todos los divs.
      if (select == "#div0") {
      location.reload(true);
      }
      });
      });
      /script>
      /head>
      body>
      select id="select" name="select">
      option value="div0">Selecciona una Sección.../option>
      option value="div1">Sección 1/option>
      option value="div2">Sección 2/option>
      option value="div3">Sección 3/option>
      option value="div4">Sección 4/option>
      option value="div5">Sección 5/option>
      /select>
      div id="DivPai">
      div id="div1">
      p>Contenido sección 1./p>
      /div>
      div id="div2">
      p>Contenido sección 2./p>
      /div>
      div id="div3">
      p>Contenido sección 3./p>
      /div>
      div id="div4">
      p>Contenido sección 4./p>
      /div>
      div id="div5">
      p>Contenido sección 5./p>
      /div>
      /div>
      /body>
      [/code]

      **NOTA:**
      A TODAS las etiquetas les falta el '<' de apertura para que me deje publicarlo.

      Eliminar