[SOLUCIONADO] Formulario que oculte o muestre diferentes campos

[agustinpak]

Buenas. Intento crear un formulario en donde la idea es si elijo una opcion de un select me muestre mas campos, y si selecciono la otra opción del select me muestre otros campos. Pude lograr que me oculte campos si selecciono una de las opciones, pero no se como hacer para que oculte unos y muestre otros, y viceversa.

Este es el código:

Código Javascript:

<script type="text/javascript">
  function comprobar(){
    var titulacion = document.getElementById('titulacion');
    var rango = document.getElementById('rango');
    if(rango.value == 1)
    {
      titulacion.style.display = 'block';
    }
    else
    {
      titulacion.style.display = 'none';
    }
    
  }
</script>
 

Código HTML:

<form action="kiosk.php" method="post" class="form" id="form1"><?php
 <p>
 
                        <label>
                         <select onchange="comprobar();" name="rango" id="rango" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Elegir Mutual" required/>>
                        
                            <option value="" disabled selected>TIPO VENTA</option>
                            <option value="1">VENTA DE BOLETOS</option>
                            <option value="2">CARGA DE TARJETA</option>
 
                        </select>
                        </label>
            </p>
 
 
                    <div id="titulacion"> 
                    <label>
                    <select name="origen" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="ORIGEN" id="comment" required/>
                        
                    <option value="" disabled selected>ORIGEN</option>
                        <?php
                        $localidades = mysqli_query($dbservidor2,"SELECT * from localidades order by localidad");
                        while ($resultado = mysqli_fetch_array($localidades)){
                        ?>
                    <option value = "<?php echo $resultado['localidad']; ?>"><?php echo strtoupper($resultado['localidad']); ?></option>
                        <?php
                        }
                        ?>
                    </select>
 
           
                        <select name="destino" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="DESTINO" id="comment" required/>
                        
                    <option value="" disabled selected>DESTINO</option>
                        <?php
                        $localidades = mysqli_query($dbservidor2,"SELECT * from localidades order by localidad");
                        while ($resultado = mysqli_fetch_array($localidades)){
                        ?>
                    <option value = "<?php echo $resultado['localidad']; ?>"><?php echo strtoupper($resultado['localidad']); ?></option>
                        <?php
                        }
                        ?>
                    </select>
 
                    <input type="text" pattern="[1-9]" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" name="cantidad" id="comment" placeholder="CANTIDAD DE BOLETOS" required />
 
                    </label>
                    </div>
 
           
 
              <div class="submit">
                <input type="submit" value="IMPRIMIR COMPROBANTE" id="button-blue"/>
                <div class="ease"></div>
              </div>
            </form>
 

[alvaro_trewhela]

a puro if

if(opc == 1){
elemento1.style.display = "block";

elemento2.style.display = "none";
elemento3.style.display = "none";
elemento4.style.display = "none";
etc...
}
else if(opc == 2){
elemento2.style.display = "block";

elemento1.style.display = "none";
elemento3.style.display = "none";
elemento4.style.display = "none";
etc..
}
else if(opc == 3){
elemento3.style.display = "block";

elemento1.style.display = "none";
elemento2.style.display = "none";
elemento4.style.display = "none";
etc..
}

y así....

[agustinpak]

Gracias. Funciona ok. Aunque el único problema es que al ingresar a la pagina me muestra todos los campos. Como haría para que al principio me oculte todos los campos y a partir de la primera seleccion me muestre los correspondientes? Gracias

[alvaro_trewhela]

Aplica display:none a los elementos que no quieras que se muestren:

<div style="display:none">

Saludos.

[agustinpak]

Gracias. Lo había intentado pero se ve que algo no estaba haciendo bien.

Saludos