Foros del Web » Programando para Internet » Javascript »

Mostrar codigo depende de la selccion de lista

Estas en el tema de Mostrar codigo depende de la selccion de lista en el foro de Javascript en Foros del Web. Bueno, hola a todos, tengo una duda que se me ocurrio y es como puedo mostrar una porsion de codigo dependiendo de lo que selccione ...
  #1 (permalink)  
Antiguo 23/03/2011, 05:25
 
Fecha de Ingreso: diciembre-2008
Mensajes: 122
Antigüedad: 13 años, 8 meses
Puntos: 1
Mensaje Mostrar codigo depende de la selccion de lista

Bueno, hola a todos, tengo una duda que se me ocurrio y es como puedo mostrar una porsion de codigo dependiendo de lo que selccione en lista. O sea a idioma lunfardo valor de lisata = valor1 mostrar codigo 1, si es = valor 2 mostrar codigo 2, etc. Desde ya michas gracias y espero se entienda lo que quiero.
  #2 (permalink)  
Antiguo 23/03/2011, 06:52
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 14 años, 1 mes
Puntos: 35
Respuesta: Mostrar codigo depende de la selccion de lista

Podrias usar js y css a la vez.
En css usa un estilo para mostrar un contenido en otro estilo define las propiedades css para ocultar, si mal no recuerdo con las propiedades display(none , block) y visibility(hidden, visible) puedes aplicar ambos estados.
El select debe usar el evento onchange el cual llamaría a una función js la cual en base al value del select aplicará los estilos en una porción del html, a traves del método setAttribute donde el 1º parametro que recibe el método es el nombre del atributo deberia ser class, y el 2º es el nombre es el de una clase css.
__________________
I am Doyle please insert code.
  #3 (permalink)  
Antiguo 23/03/2011, 07:34
 
Fecha de Ingreso: diciembre-2008
Mensajes: 122
Antigüedad: 13 años, 8 meses
Puntos: 1
Respuesta: Mostrar codigo depende de la selccion de lista

no tendrias un ejemplo como para guiarme. gracias por la respuesta.
  #4 (permalink)  
Antiguo 23/03/2011, 09:05
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 14 años, 1 mes
Puntos: 35
Respuesta: Mostrar codigo depende de la selccion de lista

A ver, en un html posees varios divs con texto incrustados, cada div posee un id unico, y un atributo class pudiendo adoptar 2 nombres de clases css, mostrar u ocultar
A travez de un select se dispara el evento onchange el cual llama a una función js
Código Javascript:
Ver original
  1. function activar_parrafo(id){
  2.     document.getElementById(id).setAttribute("class", "ocultar");
  3. }
en CSS las clases deben usar propiedades para mostrar/ocultar el contenido
Código Javascript:
Ver original
  1. .mostrar{
  2.     display:block;
  3.     visibility:visible;
  4. }
  5. .ocultar{
  6.     display:none;
  7.     visibility:hidden;
  8. }
En el html los options deberian tener un valor del id del Div a mostrar.
Código Javascript:
Ver original
  1. <select onchange="activar_parrafo(this.value)">
  2.    <option value="div1">Div primero</option>
  3.    <option value="div2">Div segundo</option>
  4. </select>
Ejemplo de los divs
Código Javascript:
Ver original
  1. <div id="div1" class="mostrar">Esto es el primer div</div>
  2. <div id="div2" class="mostrar">Esto es el segundo div</div>
__________________
I am Doyle please insert code.
  #5 (permalink)  
Antiguo 23/03/2011, 10:56
 
Fecha de Ingreso: diciembre-2008
Mensajes: 122
Antigüedad: 13 años, 8 meses
Puntos: 1
Respuesta: Mostrar codigo depende de la selccion de lista

esta barbaro muchas gracias, pero tiene un problema yo hago clik en el primero y me lo muestra pero cuando clien en el segundo me lo muestra pero no me oculta el primero.
  #6 (permalink)  
Antiguo 23/03/2011, 11:49
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 14 años, 1 mes
Puntos: 35
Respuesta: Mostrar codigo depende de la selccion de lista

A ver si puedes resolverlo tu mismo,
La función document.getElementsByTagName('div') devuelve un array de elementos div,
usa un for para recorrerlos y en caso que el atributo class sea igual(array[i].getAttribute('class')== 'mostrar' ) a mostrar, cambialo a 'ocultar'
__________________
I am Doyle please insert code.
  #7 (permalink)  
Antiguo 23/03/2011, 12:05
 
Fecha de Ingreso: diciembre-2008
Mensajes: 122
Antigüedad: 13 años, 8 meses
Puntos: 1
Respuesta: Mostrar codigo depende de la selccion de lista

la verdad hice un for mezclado con un if pero no sale, ahora no muestra nada podrias guiarme un poco mas. Desde ya muchas gracias.
  #8 (permalink)  
Antiguo 23/03/2011, 12:13
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 14 años, 1 mes
Puntos: 35
Respuesta: Mostrar codigo depende de la selccion de lista

Postea el code
__________________
I am Doyle please insert code.
  #9 (permalink)  
Antiguo 23/03/2011, 12:21
 
Fecha de Ingreso: diciembre-2008
Mensajes: 122
Antigüedad: 13 años, 8 meses
Puntos: 1
Respuesta: Mostrar codigo depende de la selccion de lista

Código Javascript:
Ver original
  1. <script>
  2. function activar_parrafo(id){
  3.  for (i=1;i=2;i++){
  4.      if(id==i){
  5.                 document.getElementById(id).setAttribute("class", "mostrar");
  6.      }
  7.       else {
  8.             document.getElementById(id).setAttribute("class", "ocultar");
  9.      }
  10.  }
  11. }
  12. </script>
  13. <style type="text/css">
  14. .mostrar{
  15.          display:block;
  16.          visibility:visible;
  17. }
  18. .ocultar{
  19.          display:none;
  20.          visibility:hidden;
  21. }
  22. body {
  23.     margin-left: 0px;
  24.     margin-top: 0px;
  25.     margin-right: 0px;
  26.     margin-bottom: 0px;
  27. }
  28. </style></head>
  29. <body>
  30.       <select onchange="activar_parrafo(this.value)">
  31.         <option selected="selected">Elegir</option>
  32.          <option value="1">Div primero</option>
  33.          <option value="2">Div segundo</option>
  34.       </select>
  35. <div id="div1" class="ocultar">Esto es el primer div</div>
  36. <div id="div2" class="ocultar">Esto es el segundo div</div>
  #10 (permalink)  
Antiguo 23/03/2011, 14:53
 
Fecha de Ingreso: diciembre-2008
Mensajes: 122
Antigüedad: 13 años, 8 meses
Puntos: 1
Pregunta Respuesta: Mostrar codigo depende de la selccion de lista

ahi puse el codigo si alguien es tan amable de tirarme una ayuda, por favor gracias.
  #11 (permalink)  
Antiguo 23/03/2011, 14:55
 
Fecha de Ingreso: junio-2008
Ubicación: Capital Federal xD
Mensajes: 1.208
Antigüedad: 14 años, 1 mes
Puntos: 35
Respuesta: Mostrar codigo depende de la selccion de lista

en el getelementById no estás buscando los id de los divs porque le estas usando un value 1 o 2 obtenido del select,
Este codigo deberia funcionar, lo que hace es tomar todos los div y a aquellos que posean 'mostrar' los oculta.
Código Javascript:
Ver original
  1. var arr = document.getElementsByTagName("div");
  2. for (i = 0; i < arr.length; i++) {
  3.    if (arr[i].getAttribute('class')== 'mostrar'  ){
  4.     arr[i].setAttribute("class", "ocultar");
  5.    }
  6. }
Entonces LUEGO puede usar la sentencia para activar el div que llamó a la función.
Código Javascript:
Ver original
  1. document.getElementById(id).setAttribute("class", "ocultar");
__________________
I am Doyle please insert code.
  #12 (permalink)  
Antiguo 23/03/2011, 15:39
 
Fecha de Ingreso: diciembre-2008
Mensajes: 122
Antigüedad: 13 años, 8 meses
Puntos: 1
Respuesta: Mostrar codigo depende de la selccion de lista

Muchisismas gracias ya lo e escho un poco modificado porque andaba al reves pero ya lo arregle. Graias.

Etiquetas: depende, lista
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:33.