Foros del Web » Creando para Internet » HTML »

Ocultar selects

Estas en el tema de Ocultar selects en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/09/2012, 02:52
lucasabogado
Invitado
 
Mensajes: n/a
Puntos:
Ocultar selects

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 ?
  #2 (permalink)  
Antiguo 14/09/2012, 09:13
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 10 años, 6 meses
Puntos: 86
Respuesta: Ocultar selects

eso lo tienes que consultar con tus respectivos codigos php y html en la seccion php
__________________
Saludos!
----------------------------------------------------------
  #3 (permalink)  
Antiguo 14/09/2012, 09:45
Avatar de jlct  
Fecha de Ingreso: abril-2012
Ubicación: Venezuela
Mensajes: 148
Antigüedad: 10 años, 9 meses
Puntos: 19
Respuesta: Ocultar selects

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!
  #4 (permalink)  
Antiguo 14/09/2012, 10:15
Avatar de pablogalvan  
Fecha de Ingreso: septiembre-2012
Ubicación: Sevilla Spain
Mensajes: 107
Antigüedad: 10 años, 4 meses
Puntos: 10
Respuesta: Ocultar selects

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
__________________
Especialista SEO
Liga Rfactor
  #5 (permalink)  
Antiguo 17/09/2012, 03:36
lucasabogado
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ocultar selects

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
  #6 (permalink)  
Antiguo 17/09/2012, 07:09
Avatar de jlct  
Fecha de Ingreso: abril-2012
Ubicación: Venezuela
Mensajes: 148
Antigüedad: 10 años, 9 meses
Puntos: 19
Respuesta: Ocultar selects

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.
  #7 (permalink)  
Antiguo 17/09/2012, 08:35
Avatar de pablogalvan  
Fecha de Ingreso: septiembre-2012
Ubicación: Sevilla Spain
Mensajes: 107
Antigüedad: 10 años, 4 meses
Puntos: 10
Respuesta: Ocultar selects

Jejeje a quedado chulo, creo que este puede ser un ejercicio interesante para mis alumnos :D
__________________
Especialista SEO
Liga Rfactor
  #8 (permalink)  
Antiguo 17/09/2012, 11:08
lucasabogado
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ocultar selects

muchas gracias a todos ahora lo he captado
  #9 (permalink)  
Antiguo 10/10/2012, 09:57
lucasabogado
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ocultar selects

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
  #10 (permalink)  
Antiguo 10/10/2012, 13:39
Avatar de jlct  
Fecha de Ingreso: abril-2012
Ubicación: Venezuela
Mensajes: 148
Antigüedad: 10 años, 9 meses
Puntos: 19
Respuesta: Ocultar selects

Que tipo de error te genera?? y seria bueno que mostraras los inputs donde mandas a llamar a las funciones
  #11 (permalink)  
Antiguo 10/10/2012, 16:23
lucasabogado
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ocultar selects

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
  #12 (permalink)  
Antiguo 11/10/2012, 06:34
Avatar de jlct  
Fecha de Ingreso: abril-2012
Ubicación: Venezuela
Mensajes: 148
Antigüedad: 10 años, 9 meses
Puntos: 19
Respuesta: Ocultar selects

Cita:
Iniciado por lucasabogado Ver Mensaje
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)  
Antiguo 11/10/2012, 18:11
lucasabogado
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ocultar selects

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
  #14 (permalink)  
Antiguo 12/10/2012, 10:28
Avatar de jlct  
Fecha de Ingreso: abril-2012
Ubicación: Venezuela
Mensajes: 148
Antigüedad: 10 años, 9 meses
Puntos: 19
Respuesta: Ocultar selects

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Selects Ocultos</title>
  5. <script language="javascript">
  6. function mostrar()
  7. {
  8.     if(document.getElementById('combo').value!=0)
  9.     {
  10.         document.getElementById('contenido').style.display ='block';
  11.         if(document.getElementById('combo2').value!=0)
  12.         {
  13.             document.getElementById('contenido2').style.display ='block';
  14.         }
  15.     }
  16. }
  17. </script>
  18. </head>
  19.  
  20. <select id="combo" onchange="mostrar()" />
  21. <option value="0">Seleccione Item</option>
  22. <option value="1">Valor 1</option>
  23. <option value="2">Valor 2</option>
  24. <option value="3">Valor 3</option>
  25.  
  26. <div style="display: none;" id="contenido">
  27. <select id="combo2" onchange="mostrar()" />
  28. <option value="0">Seleccione Item</option>
  29. <option value="1">Valor 1</option>
  30. <option value="2">Valor 2</option>
  31. <option value="3">Valor 3</option>
  32. </div>
  33. <div style="display:none" id="contenido2">
  34. <input type="text" value="" id="texto" />
  35. </div>
  36. </body>
  37. </html>

Este es un script sencillo pero que realiza lo que necesitas!
  #15 (permalink)  
Antiguo 12/10/2012, 17:45
lucasabogado
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ocultar selects

Muchisimas gracias te estoy muy agradecido

Saludos gracias
  #16 (permalink)  
Antiguo 16/10/2012, 12:48
Avatar de beguem  
Fecha de Ingreso: octubre-2012
Mensajes: 6
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: Ocultar selects

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

Última edición por beguem; 16/10/2012 a las 13:20

Etiquetas: input, selects
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 16:54.