JQuery - Mostrar u ocultar un DIV según la opción de un SELECT de un Formulario

 
Vista:

Mostrar u ocultar un DIV según la opción de un SELECT de un Formulario

Publicado por Gerardo (2 intervenciones) el 13/06/2021 05:49:46
Hola soy principiante y antes de subir un nuevo tema busqué en el foro y en Google, pero no pude dar con la solución.

Tengo un campo select en un formulario y según el valor seleccionado tendría que mostrar un DIV u ocultarlo.

Con un valor de ese select me funciona perfectamente, pero cuando quiero selecciono otro valor del mismo select no funciona.

Acá les pongo el código

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
$(document).ready(function(){
    $('#entrega').on('change', function() {
      if ( this.value == '3' )
      {
        $("#otheraddress").show();
      }
      else
      {
        $("#otheraddress").hide();
      }
      if  ( this.value == '4' )
      {
        $("#otheraddress1").show();
      }
      else
      {
        $("#otheraddress1").hide();
      }
    });
});
</script>

Osea si selecciono la opción 3 me muestre #otheradress sino esté oculto, o selecciono la opción 4 y me muestre #otheraddress1 sino esté oculto. Me funciona pero solo para una de las opciones.


Alguna sugerencia?

Muchas gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 229
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Mostrar u ocultar un DIV según la opción de un SELECT de un Formulario

Publicado por joel (71 intervenciones) el 13/06/2021 08:48:21
Hola Gerardo, ese código creo que tendría que ser algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
$(document).ready(function(){
    $('#entrega').on('change', function() {
      if ( this.value == '3' )
      {
        $("#otheraddress").show();
      }
      else if ( this.value == '4' )
      {
        $("#otheraddress").hide();
      }
      else
      {
        $("#otheraddress1").hide();
      }
    });
});
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Mostrar u ocultar un DIV según la opción de un SELECT de un Formulario

Publicado por Gerardo (2 intervenciones) el 13/06/2021 09:39:03
Muchas gracias por tu respuesta pero no funciona, de hecho quedó una de las opciones afuera que es la

1
2
3
else if ( this.value == '4' )
{
    $("#otheraddress").hide();

acá debería mostrar la opción

1
2
( this.value == '4' )
      $("#otheraddress1").show();

Probé con las 2 opciones, osea ocultar la

$("#otheraddress").hide();
$("#otheraddress1").show();

Pero igual siempre me funciona una de la opciones.

Muchas gracias igualmente por tu respuesta.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 142
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Mostrar u ocultar un DIV según la opción de un SELECT de un Formulario

Publicado por Horroroso (65 intervenciones) el 11/08/2021 23:02:17
Hola,

Puedes hacer lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(document).ready(function(){
            hideall();
 
            $('#entrega').on('change', function () {
                hideall();
                switch (this.value) {
                    case '1':
                        $("#otheraddress1").show();
                        break;
                    case '2':
                        $("#otheraddress2").show();
                        break;
                    case '3':
                        $("#otheraddress3").show();
                        break;
                    case '4':
                        $("#otheraddress4").show();
                        break;
                    case '5':
                        $("#otheraddress5").show();
                        break;
                    default:
                        //Other
                }
            })
 
            function hideall() {
                $("#otheraddress1").hide();
                $("#otheraddress2").hide();
                $("#otheraddress3").hide();
                $("#otheraddress4").hide();
                $("#otheraddress5").hide();
            }
}

Espero que te sirva.

Saludos!

-Horroroso-
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar