Foros del Web » Programando para Internet » Javascript »

Mostrar SELECT oculto al seleccionar valor en otro SELECT.

 Estas en el tema de Mostrar SELECT oculto al seleccionar valor en otro SELECT. en el foro de Javascript en Foros del Web. Buenas de nuevo compañeros: ¿Sabéis cómo se puede mostrar un SELECT oculto una vez se ha seleccionado un valor en otro SELECT? Es decir, mi ...
  #1 (permalink)  
Antiguo 11/06/2012, 12:08
 
Fecha de Ingreso: diciembre-2009
Mensajes: 51
Antigüedad: 15 años
Puntos: 1
Mostrar SELECT oculto al seleccionar valor en otro SELECT.
Buenas de nuevo compañeros:

¿Sabéis cómo se puede mostrar un SELECT oculto una vez se ha seleccionado un valor en otro SELECT? Es decir, mi intención es tener 10 campos SELECT ocultos y, una vez se seleccione un valor en el primer SELECT, se muestre el segundo, una vez se seleccione un valor en el segundo SELECT, se muestre el tercero, y así sucesívamente.

Agradezco cualquier idea que podáis aportar, ¡un saludo!
  #2 (permalink)  
Antiguo 11/06/2012, 13:20
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
sin ver el html es un tiro a ciegas. añade esto a cada select
Cita:
onchange="this.nextElementSibling.style.display='b lock'"
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 11/06/2012, 13:42
 
Fecha de Ingreso: diciembre-2009
Mensajes: 51
Antigüedad: 15 años
Puntos: 1
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
Cita:
Iniciado por IsaBelM Ver Mensaje
sin ver el html es un tiro a ciegas. añade esto a cada select
Gracias por tu respuesta IsaBelM.

No puse el código HTML porque éste es sencillo, pero pongo un ejemplo de cómo podría ser:

Código HTML:
<form method="post" action="#">
    <select name="select1">
        <option value="select1Option1">1</option>
        <option value="select1Option2">2</option>
        <option value="select1Option3">3</option>
    </select>
    <select name="select2">
        <option value="select2Option1">1</option>
        <option value="select2Option2">2</option>
        <option value="select2Option3">3</option>
    </select>
    <select name="selectN">
        <option value="selectNOption1">1</option>
        <option value="selectNOption2">2</option>
        <option value="selectNOption3">3</option>
    </select>
</form>
Es decir, habría desde 1 hasta N campos SELECT y, cuando se seleccione un valor en el primer SELECT, se mostraría el siguiente, etc.
  #4 (permalink)  
Antiguo 11/06/2012, 14:02
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
entonces haz lo que te he indicado. al partir del segundo han de estar ocultos. esto lo haces con css
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #5 (permalink)  
Antiguo 11/06/2012, 14:23
 
Fecha de Ingreso: diciembre-2009
Mensajes: 51
Antigüedad: 15 años
Puntos: 1
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
Cita:
Iniciado por IsaBelM Ver Mensaje
entonces haz lo que te he indicado. al partir del segundo han de estar ocultos. esto lo haces con css
¿Podrías decirme qué sobra/falta?

Código HTML:
<form method="post" action="#">
    <select name="select1" onchange="this.nextElementSibling.style.display='block'">
        <option value=""></option>
        <option value="select1Option1">1</option>
        <option value="select1Option2">2</option>
        <option value="select1Option3">3</option>
    </select>
    <select name="select2" onchange="this.nextElementSibling.style.display='block'" style="display: none">
        <option value=""></option>
        <option value="select2Option1">1</option>
        <option value="select2Option2">2</option>
        <option value="select2Option3">3</option>
    </select>
    <select name="selectN" onchange="this.nextElementSibling.style.display='block'" style="display: none">
        <option value=""></option>
        <option value="selectNOption1">1</option>
        <option value="selectNOption2">2</option>
        <option value="selectNOption3">3</option>
    </select>
</form>
  #6 (permalink)  
Antiguo 11/06/2012, 14:28
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
nada, está todo bien. por un casual está usando ie8-?? en ese caso has de cambiar nextElementSibling por nextSibling.nextSibling. pero ya te interesa hacerlo en una función
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #7 (permalink)  
Antiguo 11/06/2012, 14:38
 
Fecha de Ingreso: diciembre-2009
Mensajes: 51
Antigüedad: 15 años
Puntos: 1
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
Cita:
Iniciado por IsaBelM Ver Mensaje
nada, está todo bien. por un casual está usando ie8-?? en ese caso has de cambiar nextElementSibling por nextSibling.nextSibling. pero ya te interesa hacerlo en una función
Utilizaba la última versión de Internet Explorer pero no funcionaba, así que lo he probado en Firefox y funciona correctamente; para que también funcione en Internet Explorer basta con hacer lo último que me has indicado, sustituir nextElementSibling por nextSibling.nextSibling.

Muchísimas gracias IsaBelM, ¡un saludo!
  #8 (permalink)  
Antiguo 12/06/2012, 02:36
 
Fecha de Ingreso: diciembre-2009
Mensajes: 51
Antigüedad: 15 años
Puntos: 1
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
Voy un paso más allá:

Ahora necesito mostrar el contenido de un <tr> una vez se ha seleccionado un valor en el último SELECT del anterior <tr>.

Por ejemplo:

Código HTML:
<tr>
	<td>
		<select name="select1.1">
			<option value=""></option>
			<option value="select1.1Option1">1</option>
			<option value="select1.1Option2">2</option>
			<option value="select1.1Option3">3</option>
		</select>
	</td>
	<td>
		<select name="select1.2">
			<option value=""></option>
			<option value="select1.2Option1">1</option>
			<option value="select1.2Option2">2</option>
			<option value="select1.2Option3">3</option>
		</select>
	</td>
</tr>
<tr>
	<td>
		<select name="select2.1">
			<option value=""></option>
			<option value="select2.1Option1">1</option>
			<option value="select2.1Option2">2</option>
			<option value="select2.1Option3">3</option>
		</select>
	</td>
	<td>
		<select name="select2.2">
			<option value=""></option>
			<option value="select2.2Option1">1</option>
			<option value="select2.2Option2">2</option>
			<option value="select2.2Option3">3</option>
		</select>
	</td>
</tr>
<tr>
	<td>
		<select name="selectN.1">
			<option value=""></option>
			<option value="selectN.1Option1">1</option>
			<option value="selectN.1Option2">2</option>
			<option value="selectN.1Option3">3</option>
		</select>
	</td>
	<td>
		<select name="selectN.2">
			<option value=""></option>
			<option value="selectN.2Option1">1</option>
			<option value="selectN.2Option2">2</option>
			<option value="selectN.2Option3">3</option>
		</select>
	</td>
</tr>
Una vez se ha seleccionado un valor en el segundo SELECT del primer <tr>, se muestre el segundo <tr>, y así sucesívamente.

Lo he intentado con lo que me indicaste ayer, pero no funciona ya que los SELECT tienen <tr> y <td> entre ellos.

¿Alguna idea?

Gracias de antemano.
  #9 (permalink)  
Antiguo 12/06/2012, 05:22
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
es lo mismo que tienes hasta ahora, pero agregando delante tanto parentNode como sea necesario
Cita:
this.parentNode ---> td
this.parentNode.parentNode ---- tr
lee esto
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #10 (permalink)  
Antiguo 12/06/2012, 11:50
 
Fecha de Ingreso: diciembre-2009
Mensajes: 51
Antigüedad: 15 años
Puntos: 1
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
Cita:
Iniciado por IsaBelM Ver Mensaje
es lo mismo que tienes hasta ahora, pero agregando delante tanto parentNode como sea necesario

lee esto
¿Te refieres a lo siguiente?

Código HTML:
<form method="post" action="#">
    <table>
        <tr onchange="this.parentNode.parentNode.nextSibling.nextSibling.style.display='block'">
            <td>
                <select name="select1.1">
                    <option value=""></option>
                    <option value="select1.1Option1">1</option>
                    <option value="select1.1Option2">2</option>
                    <option value="select1.1Option3">3</option>
                </select>
            </td>
            <td>
                <select name="select1.2">
                    <option value=""></option>
                    <option value="select1.2Option1">1</option>
                    <option value="select1.2Option2">2</option>
                    <option value="select1.2Option3">3</option>
                </select>
            </td>
        </tr>
        <tr onchange="this.parentNode.parentNode.nextSibling.nextSibling.style.display='block'" style="display: none">
            <td>
                <select name="select2.1">
                    <option value=""></option>
                    <option value="select2.1Option1">1</option>
                    <option value="select2.1Option2">2</option>
                    <option value="select2.1Option3">3</option>
                </select>
            </td>
            <td>
                <select name="select2.2">
                    <option value=""></option>
                    <option value="select2.2Option1">1</option>
                    <option value="select2.2Option2">2</option>
                    <option value="select2.2Option3">3</option>
                </select>
            </td>
        </tr>
    </table>
</form>
  #11 (permalink)  
Antiguo 12/06/2012, 12:53
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
eso mismo pero en el select. como lo has hecho antes
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #12 (permalink)  
Antiguo 12/06/2012, 12:58
 
Fecha de Ingreso: diciembre-2009
Mensajes: 51
Antigüedad: 15 años
Puntos: 1
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
Cita:
Iniciado por IsaBelM Ver Mensaje
eso mismo pero en el select. como lo has hecho antes
Me debe de faltar algo, porque como muestro a continuación tampoco funciona:

Código HTML:
<form method="post" action="#">
    <table>
        <tr>
            <td>
                <select name="select1.1" onchange="this.parentNode.parentNode.nextSibling.nextSibling.zzzzzstyle.display='block'">
                    <option value=""></option>
                    <option value="select1.1Option1">1</option>
                    <option value="select1.1Option2">2</option>
                    <option value="select1.1Option3">3</option>
                </select>
            </td>
            <td>
                <select name="select1.2" onchange="this.parentNode.parentNode.nextSibling.nextSibling.zzzzzstyle.display='block'">
                    <option value=""></option>
                    <option value="select1.2Option1">1</option>
                    <option value="select1.2Option2">2</option>
                    <option value="select1.2Option3">3</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select name="select2.1" onchange="this.parentNode.parentNode.nextSibling.nextSibling.style.display='block'" style="display: none">
                    <option value=""></option>
                    <option value="select2.1Option1">1</option>
                    <option value="select2.1Option2">2</option>
                    <option value="select2.1Option3">3</option>
                </select>
            </td>
            <td>
                <select name="select2.2" onchange="this.parentNode.parentNode.nextSibling.nextSibling.style.display='block'" style="display: none">
                    <option value=""></option>
                    <option value="select2.2Option1">1</option>
                    <option value="select2.2Option2">2</option>
                    <option value="select2.2Option3">3</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select name="select3.1" onchange="this.parentNode.parentNode.nextSibling.nextSibling.style.display='block'" style="display: none">
                    <option value=""></option>
                    <option value="select3.1Option1">1</option>
                    <option value="select3.1Option2">2</option>
                    <option value="select3.1Option3">3</option>
                </select>
            </td>
            <td>
                <select name="select3.2" onchange="this.parentNode.parentNode.nextSibling.nextSibling.style.display='block'" style="display: none">
                    <option value=""></option>
                    <option value="select3.2Option1">1</option>
                    <option value="select3.2Option2">2</option>
                    <option value="select3.2Option3">3</option>
                </select>
            </td>
        </tr>
    </table>
</form>
  #13 (permalink)  
Antiguo 12/06/2012, 13:07
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
te remito a tus palabras. ahí tienes la solución
Cita:
Iniciado por Dniel Ver Mensaje
Una vez se ha seleccionado un valor en el segundo SELECT del primer <tr>, se muestre el segundo <tr>, y así sucesívamente.
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #14 (permalink)  
Antiguo 12/06/2012, 13:23
 
Fecha de Ingreso: diciembre-2009
Mensajes: 51
Antigüedad: 15 años
Puntos: 1
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
Cita:
Iniciado por IsaBelM Ver Mensaje
te remito a tus palabras. ahí tienes la solución
Jajaja, me gusta cómo haces pensar en vez de dar una respuesta directa.

Como lo muestro a continuación, si selecciono un valor en el segundo SELECT, se muestra el segundo <tr>, pero si selecciono un valor en el segundo SELECT del segundo <tr>, no se muestra el tercer <tr>, ¿sabrías a qué se debe?

Código HTML:
<form method="post" action="#">
    <table>
        <tr>
            <td>
                <select name="select1.1">
                    <option value=""></option>
                    <option value="select1.1Option1">1</option>
                    <option value="select1.1Option2">2</option>
                    <option value="select1.1Option3">3</option>
                </select>
            </td>
            <td>
                <select name="select1.2" onchange="this.parentNode.parentNode.nextSibling.nextSibling.style.display='block'">
                    <option value=""></option>
                    <option value="select1.2Option1">1</option>
                    <option value="select1.2Option2">2</option>
                    <option value="select1.2Option3">3</option>
                </select>
            </td>
        </tr>
        <tr style="display: none">
            <td>
                <select name="select2.1">
                    <option value=""></option>
                    <option value="select2.1Option1">1</option>
                    <option value="select2.1Option2">2</option>
                    <option value="select2.1Option3">3</option>
                </select>
            </td>
            <td>
                <select name="select2.2" onchange="this.parentNode.parentNode.nextSibling.nextSibling.style.display='block'">
                    <option value=""></option>
                    <option value="select2.2Option1">1</option>
                    <option value="select2.2Option2">2</option>
                    <option value="select2.2Option3">3</option>
                </select>
            </td>
        </tr>
        <tr style="display: none">
            <td>
                <select name="select3.1">
                    <option value=""></option>
                    <option value="select3.1Option1">1</option>
                    <option value="select3.1Option2">2</option>
                    <option value="select3.1Option3">3</option>
                </select>
            </td>
            <td>
                <select name="select3.2" onchange="this.parentNode.parentNode.nextSibling.nextSibling.style.display='block'">
                    <option value=""></option>
                    <option value="select3.2Option1">1</option>
                    <option value="select3.2Option2">2</option>
                    <option value="select3.2Option3">3</option>
                </select>
            </td>
        </tr>
    </table>
</form>
  #15 (permalink)  
Antiguo 12/06/2012, 13:31
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
no hay ninguna razón por la que no funcione. con lo único has de tener cuidad es que el último select no tenga el código
Cita:
<select name="select3.2" onchange="this.parentNode.parentNode.nextSibling.n extSibling.style.display='block'">
ya que no tiene un tr adyacente y producirá error
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #16 (permalink)  
Antiguo 12/06/2012, 14:22
 
Fecha de Ingreso: diciembre-2009
Mensajes: 51
Antigüedad: 15 años
Puntos: 1
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
Cita:
Iniciado por IsaBelM Ver Mensaje
no hay ninguna razón por la que no funcione. con lo único has de tener cuidad es que el último select no tenga el código

ya que no tiene un tr adyacente y producirá error
Funciona en parte en Firefox (digo en parte porque, aunque se muestran todos los <tr>, el primero se desplaza una vez se selecciona un valor en el segundo SELECT), pero en la última versión de Internet Explorer sólo funciona con el primer <tr> como te comenté anteriormente.
  #17 (permalink)  
Antiguo 12/06/2012, 15:34
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
prueba a cambiar
Cita:
display --> none/block
por
Cita:
visibility --> hidden/visible
en cuanto a ie. si funciona con el segundo tr ha de funcionar con el tercer tr
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #18 (permalink)  
Antiguo 13/06/2012, 11:23
 
Fecha de Ingreso: diciembre-2009
Mensajes: 51
Antigüedad: 15 años
Puntos: 1
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
Cita:
Iniciado por IsaBelM Ver Mensaje
prueba a cambiar

por

en cuanto a ie. si funciona con el segundo tr ha de funcionar con el tercer tr
De esa forma funciona correctamente en Firefox, pero no en Internet Explorer, aunque me gusta más el efecto de display: none que el de visibility: hidden ya que éste último deja el espacio que ocupan los <tr> ocultos en blanco.

Con respecto al funcionamiento de lo anterior en Internet Explorer, si quieres, puedes comprobar tú misma que funciona para el segundo <tr> pero no para el tercero copiando/pegando el código.

¿Alguna idea más?

Vuelvo a darte las gracias por tu tiempo.
  #19 (permalink)  
Antiguo 13/06/2012, 13:22
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
he revisado el árbol del dom y es correcto. no hay que probar nada, si funciona para el tr 2, funciona para el 3,4,5,6,n.
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #20 (permalink)  
Antiguo 13/06/2012, 14:33
 
Fecha de Ingreso: diciembre-2009
Mensajes: 51
Antigüedad: 15 años
Puntos: 1
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
Cita:
Iniciado por IsaBelM Ver Mensaje
he revisado el árbol del dom y es correcto. no hay que probar nada, si funciona para el tr 2, funciona para el 3,4,5,6,n.
Te aseguro que funciona para el segundo <tr> pero no para los siguientes, pruébalo tú misma y lo comprobarás.
  #21 (permalink)  
Antiguo 14/06/2012, 11:59
 
Fecha de Ingreso: diciembre-2009
Mensajes: 51
Antigüedad: 15 años
Puntos: 1
Respuesta: Mostrar SELECT oculto al seleccionar valor en otro SELECT.
¿Alguno/a tiene alguna idea de cómo podría funcionar?

Etiquetas: oculto, select
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 23:26.