Ocultar selects

#1 (**permalink**) 14/09/2012, 02:52

Tengo varios inputs de texto y selects pero quisiera

que los demas no se vieran hasta que haya elejido una opcion del primer select

como lo puedo hacer ?

flashmax · #2 (**permalink**) 14/09/2012, 09:13

eso lo tienes que consultar con tus respectivos codigos php y html en la seccion php

jlct · #3 (**permalink**) 14/09/2012, 09:45

Puedes hacerlo con una funcion Javascript

encierras los demas campos en un div y lo ocultas con el estilo display: none;

cuando el select tenga un valor diferente a 0 cambias el display: none por display: block;

espero te sirva la idea!

pablogalvan · #4 (**permalink**) 14/09/2012, 10:15

Lo que te dice jlct es lo mas adecuado, lo puedes hacer para cada elemento, por ejemplo:

document.getElementById("@element_id").style.displ ay="block";

Puedes ponerles id a todos los elementos o tambien puedes usar document.getElementsByName(name) usando el atributo html name="..." en cada elemento del formulario.

Anteriormente con css poner todos los display a none (style="display:none" ) y un evento onchange en el select que llame a una función que haga visibles a todos los elementos

Suerte, que al javascript lo carga el diablo!!! :D

#5 (**permalink**) 17/09/2012, 03:36

Os estoy muy agradecidos por las respuestas pero no entiendo absolutamente nada ,pero si me podeis indicar en algun sitio donde pueda ver un ejemplo completo puedo aprenderlo y seguir haciendo mi tarea.

Muchas gracias

jlct · #6 (**permalink**) 17/09/2012, 07:09

por ejemplo:

<select id="combo" onchange="mostrar()" />
<option value="0">Seleccione Item</option>
<option value="1">Valor 1</option>
<option value="2">Valor 2</option>
<option value="3">Valor 3</option>
</select>

<div style="display: none;" id="contenido">
<input type="text" id="caja" size="30" />
</div>

<script language="javascript">
function mostrar()
{
if(document.getElementById('combo').value!=0)
{
document.getElementById('contenido').style.display ='block';
}
}
</script>

Asi sucesivamente vas haciendo si lo que quieres es ir mostrando campos a medida que vayas insertando datos.

pablogalvan · #7 (**permalink**) 17/09/2012, 08:35

Jejeje a quedado chulo, creo que este puede ser un ejercicio interesante para mis alumnos :D

#8 (**permalink**) 17/09/2012, 11:08

muchas gracias a todos ahora lo he captado

#9 (**permalink**) 10/10/2012, 09:57

Nuevamente esto y con este combo otra vez resulta que ahora he decidido de que en vez de tener un campo que se desplaza que sean tres

le he aumentado otro asi :

<script language="javascript">
function mostrar()
{
if(document.getElementById('combo').value!=0)
{
document.getElementById('contenido').style.display ='block';
}
}

if(document.getElementById('combo2').value!=0)
{
document.getElementById('contenido2').style.displa y ='block';
}
}
</script> </div>

pero me da error que es lo que esta mal ?

gracias

jlct · #10 (**permalink**) 10/10/2012, 13:39

Que tipo de error te genera?? y seria bueno que mostraras los inputs donde mandas a llamar a las funciones

#11 (**permalink**) 10/10/2012, 16:23

Pues concretamente el error que me da es que simplemente no funciona nada osea ningun java y lo tengo puesto asi

<div>
<label><?php _e(primera_actividad) ?></label>

<select name="user_actividad" id="combo" class="textfield required" value="<?php echo esc_attr(stripslashes($user_actividad)); ?>" onchange="mostrar()" />
<option value=""><?php echo esc_attr(stripslashes($user_actividad)); ?></option><option value="uno">uno</option></select>

<div style="display: none;" id="contenido" m20-top>
<label><?php _e(segunda_actividad) ?></label>
<select name="user_actividad_dos" id="combo" class="textfield" value="<?php echo esc_attr(stripslashes($user_actividad_dos)); ?>" onchange="mostrar()" />
<option value=""><?php echo esc_attr(stripslashes($user_actividad)); ?></option><option value="uno">uno</option></select>
</div>

<div style="display: none;" id="contenido2" m20-top>
<label><?php _e(tercera_actividad) ?></label>
<select name="user_actividad_dos" id="combo" class="textfield" value="<?php echo esc_attr(stripslashes($user_actividad_dos)); ?>" onchange="mostrar()" />
<option value=""><?php echo esc_attr(stripslashes($user_actividad)); ?></option><option value="uno">uno</option></select>
</div>

<script language="javascript">
function mostrar()
{
if(document.getElementById('combo').value!=0)
{
document.getElementById('contenido').style.display ='block';
}
}

if(document.getElementById('combo2').value!=0)
{
document.getElementById('contenido2').style.displa y ='block';
}
}
</script> </div>

saludos y gracias

jlct · #12 (**permalink**) 11/10/2012, 06:34

Cita:

Iniciado por lucasabogado

Pues concretamente el error que me da es que simplemente no funciona nada osea ningun java y lo tengo puesto asi

<div>
<label><?php _e(primera_actividad) ?></label>

<select name="user_actividad" id="combo" class="textfield required" value="<?php echo esc_attr(stripslashes($user_actividad)); ?>" onchange="mostrar()" />
<option value=""><?php echo esc_attr(stripslashes($user_actividad)); ?></option><option value="uno">uno</option></select>

<div style="display: none;" id="contenido" m20-top>
<label><?php _e(segunda_actividad) ?></label>
<select name="user_actividad_dos" id="combo" class="textfield" value="<?php echo esc_attr(stripslashes($user_actividad_dos)); ?>" onchange="mostrar()" />
<option value=""><?php echo esc_attr(stripslashes($user_actividad)); ?></option><option value="uno">uno</option></select>
</div>

<div style="display: none;" id="contenido2" m20-top>
<label><?php _e(tercera_actividad) ?></label>
<select name="user_actividad_dos" id="combo" class="textfield" value="<?php echo esc_attr(stripslashes($user_actividad_dos)); ?>" onchange="mostrar()" />
<option value=""><?php echo esc_attr(stripslashes($user_actividad)); ?></option><option value="uno">uno</option></select>
</div>

<script language="javascript">
function mostrar()
{
if(document.getElementById('combo').value!=0)
{
document.getElementById('contenido').style.display ='block';
}
}

if(document.getElementById('combo2').value!=0)
{
document.getElementById('contenido2').style.displa y ='block';
}
}
</script> </div>

saludos y gracias

Tienes el IF comparando el valor del elemento con ID = combo2 Pero no tienes ningun elemento con esa ID corrige eso y lo pruebas.

Otra cosita que te podria ayudar a probar cuando hay errores es revisar la consola de errores del navegador, es una herramienta muy util.

Espero que con eso puedas resolver tu problema..

Saludos!

#13 (**permalink**) 11/10/2012, 18:11

He probado tal y como me has dicho pero no me funciona tampoco estoy hecho un monton de nervios

si eres tan amable de ponerlo tu en el primer ejemplo que me hiciste te estaria agradecido

saludos

jlct · #14 (**permalink**) 12/10/2012, 10:28

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Selects Ocultos</title>
<script language="javascript">
function mostrar()
{
    if(document.getElementById('combo').value!=0)
    {
        document.getElementById('contenido').style.display ='block';
        if(document.getElementById('combo2').value!=0)
        {
            document.getElementById('contenido2').style.display ='block';
        }
    }
}
</script> 
</head>
 
<body>
<select id="combo" onchange="mostrar()" />
<option value="0">Seleccione Item</option>
<option value="1">Valor 1</option>
<option value="2">Valor 2</option>
<option value="3">Valor 3</option>
</select>
 
<div style="display: none;" id="contenido">
<select id="combo2" onchange="mostrar()" />
<option value="0">Seleccione Item</option>
<option value="1">Valor 1</option>
<option value="2">Valor 2</option>
<option value="3">Valor 3</option>
</select>
</div>
<div style="display:none" id="contenido2">
<input type="text" value="" id="texto" />
</div>
</body>
</html>

Este es un script sencillo pero que realiza lo que necesitas!

#15 (**permalink**) 12/10/2012, 17:45

Muchisimas gracias te estoy muy agradecido

Saludos gracias

beguem · #16 (**permalink**) 16/10/2012, 12:48

edito se puede hacer mas facil desde jquery y aparte podes remover la opcion para que no se vuelva a seleccionar

Código HTML:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>Z$(document).ready(function(){
        $("#tuselect").change(function(){
            $("#tuselect2").show();
		$("#tuselect option[value==0]").remove();
	$("#tuselect2").change(function(){
            $("#contenido").show();
		$("#tuselect2 option[value==0]").remove();
        });
});</script>
</head>
<body>
<select id="combo" onchange="mostrar()" />
<option value="0">Seleccione Item</option>
<option value="1">Valor 1</option>
<option value="2">Valor 2</option>
<option value="3">Valor 3</option>
</select>
 
<div style="display: none;" id="contenido">
<select id="combo2" onchange="mostrar()" />
<option value="0">Seleccione Item</option>
<option value="1">Valor 1</option>
<option value="2">Valor 2</option>
<option value="3">Valor 3</option>
</select>
</div>
<div style="display:none" id="contenido2">
<input type="text" value="" id="texto" />
</div>
</body>

espero que te sirva saludos