Mostrar codigo depende de la selccion de lista

santa2r · #1 (**permalink**) 23/03/2011, 05:25

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.

doylelives · #2 (**permalink**) 23/03/2011, 06:52

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.

santa2r · #3 (**permalink**) 23/03/2011, 07:34

no tendrias un ejemplo como para guiarme. gracias por la respuesta.

doylelives · #4 (**permalink**) 23/03/2011, 09:05

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 originalfunction activar_parrafo(id){
    document.getElementById(id).setAttribute("class", "ocultar");
}

en CSS las clases deben usar propiedades para mostrar/ocultar el contenido

Código Javascript:

Ver original.mostrar{
    display:block;
    visibility:visible;
}
.ocultar{
    display:none;
    visibility:hidden;
}

En el html los options deberian tener un valor del id del Div a mostrar.

Código Javascript:

Ver original<select onchange="activar_parrafo(this.value)">
   <option value="div1">Div primero</option>
   <option value="div2">Div segundo</option>
</select>

Ejemplo de los divs

Código Javascript:

Ver original<div id="div1" class="mostrar">Esto es el primer div</div>
<div id="div2" class="mostrar">Esto es el segundo div</div>

santa2r · #5 (**permalink**) 23/03/2011, 10:56

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.

doylelives · #6 (**permalink**) 23/03/2011, 11:49

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'

santa2r · #7 (**permalink**) 23/03/2011, 12:05

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.

doylelives · #8 (**permalink**) 23/03/2011, 12:13

Postea el code

santa2r · #9 (**permalink**) 23/03/2011, 12:21

Código Javascript:

Ver original<script>
function activar_parrafo(id){
 for (i=1;i=2;i++){
     if(id==i){
                document.getElementById(id).setAttribute("class", "mostrar");
     }
      else {
            document.getElementById(id).setAttribute("class", "ocultar");
     }
 }
}
</script>
<style type="text/css">
.mostrar{
         display:block;
         visibility:visible;
}
.ocultar{
         display:none;
         visibility:hidden;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
</style></head>
<body>
      <select onchange="activar_parrafo(this.value)">
        <option selected="selected">Elegir</option>
         <option value="1">Div primero</option>
         <option value="2">Div segundo</option>
      </select>
<div id="div1" class="ocultar">Esto es el primer div</div>
<div id="div2" class="ocultar">Esto es el segundo div</div>

santa2r · #10 (**permalink**) 23/03/2011, 14:53

ahi puse el codigo si alguien es tan amable de tirarme una ayuda, por favor gracias.

doylelives · #11 (**permalink**) 23/03/2011, 14:55

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 originalvar arr = document.getElementsByTagName("div");
for (i = 0; i < arr.length; i++) {
   if (arr[i].getAttribute('class')== 'mostrar'  ){
    arr[i].setAttribute("class", "ocultar");
   }
}

Entonces LUEGO puede usar la sentencia para activar el div que llamó a la función.

Código Javascript:

Ver originaldocument.getElementById(id).setAttribute("class", "ocultar");

santa2r · #12 (**permalink**) 23/03/2011, 15:39

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