JavaScript - DIsplay none dependiendo del valor de un select al cargar la pagina

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Angel (9 intervenciones) el 02/06/2018 01:11:08

Muy buenas,

les comento el problema que tengo. Necesito que, dependiendo del valor seleccionado de un select se muestren o no ciertos inputs del formulario. Esto lo consigo ya despues de cargar la página cada vez que se cambia el valor del select con el evento onchange, esta es una parte que necesito y que ya está funcionando. Pero también necesito que, al cargar la página, dependiendo del valor que venga seleccionado en el select, se muestren o no los otros inputs, sin tener que cambiar el valor del select, es decir, sin el evento onchange.

He provado a llamar en onload del body a la misma funcion que llamo en el onchange del select, pero no funciona.

Le he dado mil vueltas y buscado info en la web pero no doy con la tecla, espero que puedan ayudarme por que ando algo apurado.

Gracias de antemano por compartir conocomiento, un saludo.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 6

Val: 1.448

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Alejandro (532 intervenciones) el 02/06/2018 16:04:48

Alejandro se encuentra ahora conectado en el
chat de PHP

Lo que comentas es correcto pero sin ver el codigo no sabria decirte en que te falla.

Si en el onchange pasas el valor seleccionado onchange="elegir(this.value)" y en el onload solo llamas la funcion onload="elegir()" ese puede ser un problema.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Angel (9 intervenciones) el 02/06/2018 20:58:08

Buenas alejandro, gracias por tu respuesta.

Mi función javascript es la siguiente:

function mostrarComentarios(id){

    var select = document.getElementById("origen"+id);

    var origen = select.options[select.selectedIndex].text;

    var div = document.getElementById('comentarioorigen'+id);

    if(origen=='Otro' || origen=='Otras'){

        div.style.display = '';

    }else{

        div.style.display='none';

En la variable select guardo el select del que depende si se muestra o no el otro, llamado comentarioorigen+id

Esta función sirve perfectamente cuando la llamo desde el elemento onchange del select, pero no puedo hacerla funcionar en el evento onload.

Mi idea sería en el onload hacer ejecutarse esta función varias veces una vez por cada select distinto con su id. Pero a este punto aun no he llegado, ya que intento hacer una única llamada con uno de los selects pasándole su id y no funciona.

Gracias de antemano por las posibles respuestas.

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Alejandro (532 intervenciones) el 03/06/2018 01:06:39

Alejandro se encuentra ahora conectado en el
chat de PHP

Falta ver como haces las llamadas a la funcion y ver como tienes los id.

Segun tu codigo tendria que ser asi

<script>

	function mostrarComentarios(id){

		var select = document.getElementById("origen"+id);

		var origen = select.options[select.selectedIndex].text;

		var div = document.getElementById('comentarioorigen'+id);

		if(origen=='Otro' || origen=='Otras'){

			div.style.display = '';

		}else{

			div.style.display='none';

</script>

<body onload="mostrarComentarios(1)">

	<select id="origen1" onchange="mostrarComentarios(1)">

		<option>Opcion 1</option>

		<option selected>Otro</option>

	</select>

	<div id="comentarioorigen1" style="display:none">Comentario</div>

</body>

Pudes ver que Otro tiene "selected" asi al cargar la pagina es el que estara seleccionado y el div sera mostrado

Valora esta respuesta

Comentar

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Angel (9 intervenciones) el 03/06/2018 21:13:42

Buenas tardes,

si esá es exactamente la forma en la que lo llamo. El caso es que en la llamada de onchange del select funciona pero la del onload del body no lo hace.

Valora esta respuesta

-1

Comentar

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Ángel (9 intervenciones) el 04/06/2018 15:00:25

A que creeis que puede ser debido que esta función no sirva al llamarla desde onload del body? Se os ocurre alguna alternativa para hacer lo mismo.

Un saludo y gracias de antemano por vuestra ayuda.

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Alejandro (532 intervenciones) el 04/06/2018 16:10:54

Alejandro se encuentra ahora conectado en el
chat de PHP

El codigo que te he publicdo funciona sin ningun problema.

Valora esta respuesta

Comentar

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Angel (9 intervenciones) el 04/06/2018 21:00:02

Buenas Alejandro,

a ver entonces si estoy haciendo algo mal, pero algo no me funciona. Mi código es el siguiente.

<script>

function mostrarComentarios(id){

    var select = document.getElementById("origen"+id);

    var origen = select.options[select.selectedIndex].text;

    var div = document.getElementById('comentarioorigen'+id);

    if(origen=='Otro' || origen=='Otras'){

        div.style.display = '';

    }else{

        div.style.display='none';

</script>

<body class="body" onload="mostrarComentarios('bs')">

<div class="wrap-input100 bg1 rs1-wrap-input100" >

    <label class="label-input100" for="Origenbs">Origen bs</label>

    <s:select headerKey="-1" cssClass="input100"

    list="#@java.util.LinkedHashMap@{'':'', 'BS1", 'BS2'}"

    onchange="mostrarComentarios('bs')"

    id="origenbs"

    name="Origenbs"/>

    </div>

    <div class="wrap-input100 bg1 rs1-wrap-input100 grande" id="comentarioorigenbs" style="display: none">

        <label class="label-input100" for="comentarioorigenbs">Comentarios origen bacteriemia secundaria</label>

        <s:textarea name="comentarioorigenbs" cols="35" rows="5" style="background: transparent;" />

    </div>

</body>

Y como comentaba, este código me funciona al hacer la llamada desde onchange en el select, pero no al hacerla desde el onload del body. Al cargar la página, tengo deseleccionar el elemento y volverlo a seleccionar para que se muestre el campo oculto.

Gracias de antemano por cualquier ayuda que podais darme, me estoy volviendo un poco loco con esto. Un saludo.

Valora esta respuesta

Comentar

Pos: 47

Val: 39

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Lopez (9 intervenciones) el 02/06/2018 16:25:55

Sumando a la recomendación de Alejandro,
Puedes usar este código básico de la W3 : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements
Y cargarle al select la función en el evento Click. Algo así:

<select onclick="filterSelection(this.value)">

  <option value="all">All</option>

  <option value="cars">Cars</option>

  <option value="animals">Animals</option>

  <option value="fruits">Fruits</option>

</select>

Este ejemplo usa classes para determinar a que elementos afectar.
Espero sirva,
Saludos!

Valora esta respuesta

Comentar

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Ángel (9 intervenciones) el 04/06/2018 21:01:28

Mi código es el siguiente.

<script>

function mostrarComentarios(id){

    var select = document.getElementById("origen"+id);

    var origen = select.options[select.selectedIndex].text;

    var div = document.getElementById('comentarioorigen'+id);

    if(origen=='Otro' || origen=='Otras'){

        div.style.display = '';

    }else{

        div.style.display='none';

</script>

<body class="body" onload="mostrarComentarios('bs')">

<div class="wrap-input100 bg1 rs1-wrap-input100" >

    <label class="label-input100" for="Origenbs">Origen bs</label>

    <s:select headerKey="-1" cssClass="input100"

    list="#@java.util.LinkedHashMap@{'':'', 'BS1", 'BS2'}"

    onchange="mostrarComentarios('bs')"

    id="origenbs"

    name="Origenbs"/>

    </div>

    <div class="wrap-input100 bg1 rs1-wrap-input100 grande" id="comentarioorigenbs" style="display: none">

        <label class="label-input100" for="comentarioorigenbs">Comentarios origen bacteriemia secundaria</label>

        <s:textarea name="comentarioorigenbs" cols="35" rows="5" style="background: transparent;" />

    </div>

</body>

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Alejandro (532 intervenciones) el 04/06/2018 22:24:25

Alejandro se encuentra ahora conectado en el
chat de PHP

Desconosco el lenguaje que usas pero en la linea 20 estan mal las comillas

Como lo tienes :

list="#@java.util.LinkedHashMap@{'':'', 'BS1", 'BS2'}"

Como debe ser:

list="#@java.util.LinkedHashMap@{'':'', 'BS1', 'BS2'}"

Tengo una sospecha de que tu codigo funciona asi:
Se carga la pagina
Se ejecuta el onload antes de interpretar tu codigo y poreso no funciona
Se interpreta tu codigo donde tu <s:select pasa a ser un <select> ya poblado
El onchange funciona puesto que ya esta interpretado el codigo.

Esta teoria es en el caso de que el interprete funciona del lado del cliente.
intenta agregar un alert(origen) despues de la declaracion de la variable.

Valora esta respuesta

Comentar

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Angel (9 intervenciones) el 05/06/2018 08:47:09

Buenos días Alejandro,

efectivamente debe ser algo así. Acabo de probar ejecutar un alert nada mas empezar la función. El alert muestra el mensaje cada vez que cambio del valor del select (funciona con la llamada en onchange) pero nunca muestra el mensaje al cargar la página (no funciona con el evento onload). Esto parece que es aun mas raro, ya que es la primera sentencia que se ejecuta en la función.

¿Existe alguna alternativa que pueda usar en lugar de onload para hacer lo mismo?

Gracias y un saludo.

Valora esta respuesta

Comentar

Pos: 6

Val: 1.448

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Alejandro (532 intervenciones) el 05/06/2018 16:04:57

Alejandro se encuentra ahora conectado en el
chat de PHP

No me parece que sea asi, mi teoria era que el elemento select aun no existe poreso da error y no continua el codigo.
con solo esto debes ver el alert con el id que esta pasando el onload.

<script>

function mostrarComentarios(id){

	alert(id);

</script>

<body onload="mostrarComentarios('bs')">

Con tu codigo intenta ver la consola por si te estubiera marcando algun error sabor por donde ir.

Esta es otra forma de hacerlo.

<script>

window.onload =	mostrarComentarios('bs');

function mostrarComentarios(id){

	alert(id);

</script>

Valora esta respuesta

Comentar

DIsplay none dependiendo del valor de un select al cargar la pagina

Publicado por Angel (9 intervenciones) el 05/06/2018 20:11:53

Buenas tardes Alejandro,

de verdad que gracias por el interes que estas mostrando. Se que parece extraño, pero acabo de probar exactamente ese mismo código, llamando la función en el onload y dejando dentro de la función solo la linea del alert, y sencillamente no funciona. Se que debería hacerlo y que no tiene sentido, pero sencillamente no lo hace.

El navegador no muestra el alert (como si que lo muestra en el onchange del select) y la consola del navegador tampoco devuelve nada extraño. No se si es por el funcionamiento de Struts 2, por que el jsp no ejecuta la llamada a onload, pero me trae de cabeza esto....

Gracias por cualquier ayuda que podais darme, un saludo.

EDITO

Solucionado! Simplemente he tenido que colocar la llamada al script por debajo del html del select, he colocado al final de todo el código la etiqueta script que llamava al archivo javascript y ya funciona usando la llamada window.onload como sugerias en el comentario anterior alejandro.

Muchas gracias por tu ayuda! me ha servido mucho. Espero que también ayude a otra gente este hilo.

Un saludo.

Valora esta respuesta

Comentar

Capturar datos en HTML y visualizarlos en JavaScript

Mostrar el contenido de un div cuando se pinche en un botón