[SOLUCIONADO] Ocultar y mostrar campos via select

[lizkabbalah]

Hola buenas tardes, necesito de su ayuda
tengo este select, lo que necesito es que al momento de elegir "especifico" muestre el formulario específico o si se elige comercial aparezca su respectivo formulario

Tipo <select name="elige" id="">
<option value="">Espec&iacute;fico</option>
<option value="">Comercial</option>

</select>

<div id="opc1">
<p>formulario del especifico</p>
</div>
<div id="opc2">
<p>Formulario comercial</p>
</div>

de antemano gracias por su ayuda

[NueveReinas]

Espero que esto te sirva como ejemplo: http://jsfiddle.net/j0bkvLgv/

Código HTML:

<form class="test">
    <select name="selector" id="test">
        <option value="1">Espec&iacute;fico</option>
        <option value="2">Comercial</option>
    </select>
</form>
 
<form class="esp">
    <label>Especifica:</label>
    <input type="text" />
</form>
 
<form class="com">
    <label>Comercial:</label>
    <input type="text" />
</form>
 

Código CSS:

.test {
    background:green;
    padding:15px;
    margin:10px;
}
 
.esp {
    background:blue;
    padding:15px;
    margin:10px;
    display:none;
    color:white;
}
 
.com {
    background:red;
    padding:15px;
    margin:10px;
    display:none;
    color:white;
}
 

Código Javascript:

//Asignamos como valor principal al "select", el valor 1. Es el que se mostrará sin haber seleccionado nada.
if ($('#test').val() == 1)
    {
        $(".esp").css("display","block");
        $(".com").css("display","none");
    };
 
//Detectamos los cambios y mostramos uno u otro form
$('#test').change(function() {
    
    if ($('#test').val() == 1)
    {
        $(".esp").css("display","block");
        $(".com").css("display","none");
    };
    
    if ($('#test').val() == 2)
    {
        $(".esp").css("display","none");
        $(".com").css("display","block");
    };
    
});
 

Saludos.

[Alexis88]

Una manera sencilla de hacer esto es utilizando una clase CSS que haga visible al elemento.

Primero, oculta a ambas divisiones:

Código CSS:

div{
    display: none;
}
 

Luego, crea la clase que hará visible al elemento al que se la apliques:

Código CSS:

.visible{
    display: block;
}
 

La estructura de tu combo debería de ser más o menos así:

Código HTML:

<select name="elige" id="elige">
    <option value="">Seleccione una opción</option>
    <option value="opc1">Específico</option>
    <option value="opc2">Comercial</option>
</select>
 

Como verás, asigné los identificadores de las divisiones a los valores de las opciones, esto para que cuando se elija una opción, se tome a la división correspondiente al valor de la opción seleccionada y así podamos mostrarla. También creé una opción que por defecto será la primera y le indicará al usuario lo que debe de hacer.

Ahora, crea una función que se ejecutará cuando se elija una opción del combo:

Código Javascript:

document.querySelector("#elige").addEventListener("change", function(){
    if (this.value.length){
        if (document.querySelector(".visible").length){
            document.querySelector(".visible").className = "";
        }
        document.querySelector("#" + this.value).className = "visible";
    }
}, false);
 

Cuando se elija una opción del combo, primero verificamos que su valor tenga contenido o extensión, que para el caso es lo mismo, luego de esto, verificamos si existen elementos con la clase 'visible' (esta verificación es útil solo la primera vez, para evitar que se generen mensajes de error en la consola, pues al principio, ningún elemento posee esa clase) y de haber, se la quitamos. Finalmente, asignamos dicha clase al elemento cuyo identificador corresponda con la opción seleccionada.

La ventaja de hacerlo así, es que puedes tener N divisiones y el funcionamiento siempre será el mismo.

DEMO

Saludos

[lizkabbalah]

sí me sirvió gracias, pero elijo una de las dos y regreso a elegir eleccione me sigue apareciendo el cuadro sea rojo o verde, ahi como le puedo hacer?

[Alexis88]

Muéstranos el código actualizado y explícanos mejor qué está pasando ahora porque, la verdad, no te entendí ni un poquito.

[lizkabbalah]

mira esto es lo que llevo, me podrías orientar por favor
la parte de java script y css no te entendi muy bien , asi ke podrías ayudarme por favor?


te lo agradecería muchisimo
<form method="POST" action="procesar.php">

<select name="elige" id="elige">
<option value="">seleccione una opcion</option>
<option value="">Espec&iacute;fico</option>
<option value="">Comercial</option>
</select>

<!--PRIMER OPCION-->
<div id = "opc1">
<p>
Nombre: <input type="text" name="nombre">
</p>
Apellidos: <input type="text" name="apellidos">
<p>
Compra (Unidades):<input type="text" name="compra">
</p> <p>
Fecha:<input type="date" name="fecha">
</p>
<p>
Zona:<select name="zona" required pattern="[A-Z ]+">
<option value="">...</option>
<option value="TUXPAN-COAMILES">TUXPAN-COAMILES</option>
<option value="ROSAMORADA-RUIZ">ROSAMORADA-RUIZ</option>
<option value="LAS HACIENDAS">LAS HACIENDAS</option>
</select>
</p>
<p>
D&iacute;a:<select name="dia" required pattern="[A-Z]+">
<option value="">...</option>
<option value="LUNES">LUNES</option>
<option value="MARTES">MARTES</option>
<option value="MIERCOLES">MIERCOLES</option>
<option value="JUEVES">JUEVES</option>
<option value="VIERNES">VIERNES</option>
<option value="SABADO">SABADO</option>
</select>
</p>
<p>
No. Ruta:<select name="numero" required pattern="[1-9]+" title="Sólo números" >
<option value="">....</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
<input type="submit" values="guardar" name="guardar">
</div>

<!--sEGUNDA OPCION-->

<div id="opc2">
<p>
Neogocio/servicio: <input type="text" name="nombre">
</p>
<p>
Compra (Unidades):<input type="text" name="compra">
</p> <p>
Fecha:<input type="date" name="fecha">
</p>
<p>
Zona:<select name="zona" required pattern="[A-Z ]+">
<option value="">...</option>
<option value="TUXPAN-COAMILES">TUXPAN-COAMILES</option>
<option value="ROSAMORADA-RUIZ">ROSAMORADA-RUIZ</option>
<option value="LAS HACIENDAS">LAS HACIENDAS</option>
</select>
</p>
<p>
D&iacute;a:<select name="dia" required pattern="[A-Z]+">
<option value="">...</option>
<option value="LUNES">LUNES</option>
<option value="MARTES">MARTES</option>
<option value="MIERCOLES">MIERCOLES</option>
<option value="JUEVES">JUEVES</option>
<option value="VIERNES">VIERNES</option>
<option value="SABADO">SABADO</option>
</select>
</p>
<p>
No. Ruta:<select name="numero" required pattern="[1-9]+" title="Sólo números" >
<option value="">....</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
<input type="submit" values="guardar" name="guardar">

</div>

<!--TERMINACION-->

</form>

[Alexis88]

A ver, vamos por partes.

Lo que te decía con respecto a los estilos (CSS), es que desde una hoja de estilos, ocultes a ambos <div> mediante la propiedad display, asignándole el valor none, luego, en la misma hoja de estilos, crea una clase que tendrá como única propiedad a display pero con el valor block, de esta manera, cuando selecciones una opción del <select>, tomas al <div> que corresponda y le aplicas dicha clase, además, buscas al <div> que ya posea dicha clase, es decir, al que haya sido seleccionado previamente.

Como añadido, la primera opción, que es la que no tiene valor, al ser seleccionada, debe de ocultar al <div> que sea visible en ese momento, por lo que el script sería así:

Código Javascript:

//La variable en la que guardaré al elemento que posea la clase 'visible'
var visible;
 
//Ejecuto una función cuando elija una opción del <select>
document.querySelector("#elige").addEventListener("change", function(){
    
    //Tomo al <div> que posea la clase 'visible'
    visible = document.querySelector(".visible");
 
    //Si el valor de la opción seleccionada contiene uno o más caracteres
    if (this.value.length){
        //Verifico si hay al menos un <div> con la clase 'visible'
        if (visible.length){
            //De haberlo, le quito dicha clase
            visible.className = "";
        }
        //Luego, tomo al <div> cuyo id corresponda con el de la opción seleccionada y le asigno la clase 'visible'
        document.querySelector("#" + this.value).className = "visible";
    }
 
    //Si el valor de la opción seleccionada no contiene caracteres (está vacía)
    else{
        //Verifico si hay al menos un <div> con la clase 'visible'
        if (visible.length){
            //De haberlo, le quito dicha clase
            visible.className = "";
        }
    }
}, false);
 

Y, por favor, cuando muestres código, utiliza el highlight que corresponda, así será más fácil leer tu código. Puedes seleccionarlo desde el <select> que aparece justo arriba del área de texto en el que escribes tus respuestas.



No te olvides de asignar los id de los <div> a las dos últimas opciones del <select>, tal y como te lo expliqué en mi respuesta anterior.

Saludos

[lizkabbalah]

si si entiendo, pero, seguí tus indicaciones y no logro que me aparezca el "div" que selecciono

[Alexis88]

¿Cómo tienes organizado tu código?

Muéstranos el esquema, porque sospecho que el código JavaScript se encuentra en la cabecera y por ende, el <select> no se ve afectado ya que aún no ha cargado. Si este es el caso, sácalo de ahí y ponlo debajo del último elemento de tu documento y justo antes de la etiqueta </body>.

Saludos

[lizkabbalah]

mira te lo voy a mostrar todo y me dices que me falta o que puse demás

Código Javascript:

<script>
    document.querySelector("#elige").addEventListener("change", function(){
    if (this.value.length){
        if (document.querySelector(".visible").length){
            document.querySelector(".visible").className = "";
        }
        document.querySelector("#" + this.value).className = "visible";
    }
}, false);
    </script>
 

Código HTML:

<body>
    <h1>Hielo de Tuxpan</h1>
    <h3>Registro Cliente</h3>
    <br>
    <br>
    <form method="POST" action="procesar.php">
 
         <select name="elige" id="elige">
            <option value="">seleccione una opcion</option>
            <option value="opc1">Espec&iacute;fico</option>
            <option value="opc2">Comercial</option>
        </select>
 
<!--PRIMER OPCION-->
        <div id = "opc1">
            <p>
                Nombre: <input type="text" name="nombre">
            </p>
            Apellidos: <input type="text" name="apellidos">
            <p>
                Compra (Unidades):<input type="text" name="compra">
            </p>            <p>
                Fecha:<input type="date" name="fecha">
            </p>
            <p>
                Zona:<select name="zona" required pattern="[A-Z ]+">
    <option value="">...</option>
    <option value="TUXPAN-COAMILES">TUXPAN-COAMILES</option>
    <option value="ROSAMORADA-RUIZ">ROSAMORADA-RUIZ</option>
    <option value="LAS HACIENDAS">LAS HACIENDAS</option>
</select>
            </p>
            <p>
               D&iacute;a:<select name="dia" required pattern="[A-Z]+">
    <option value="">...</option>
    <option value="LUNES">LUNES</option>
    <option value="MARTES">MARTES</option>
    <option value="MIERCOLES">MIERCOLES</option>
    <option value="JUEVES">JUEVES</option>
    <option value="VIERNES">VIERNES</option>
    <option value="SABADO">SABADO</option>
</select>
            </p>
            <p>
                No. Ruta:<select name="numero" required pattern="[1-9]+" title="Sólo números" >
<option value="">....</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
            </p>
            <input type="submit" values="guardar" name="guardar">
        </div>
 
<!--sEGUNDA OPCION-->
 
        <div id="opc2">
            <p>
                Neogocio/servicio: <input type="text" name="nombre">
            </p>
            <p>
                Compra (Unidades):<input type="text" name="compra">
            </p>            <p>
                Fecha:<input type="date" name="fecha">
            </p>
            <p>
                Zona:<select name="zona" required pattern="[A-Z ]+">
    <option value="">...</option>
    <option value="TUXPAN-COAMILES">TUXPAN-COAMILES</option>
    <option value="ROSAMORADA-RUIZ">ROSAMORADA-RUIZ</option>
    <option value="LAS HACIENDAS">LAS HACIENDAS</option>
</select>
            </p>
            <p>
               D&iacute;a:<select name="dia" required pattern="[A-Z]+">
    <option value="">...</option>
    <option value="LUNES">LUNES</option>
    <option value="MARTES">MARTES</option>
    <option value="MIERCOLES">MIERCOLES</option>
    <option value="JUEVES">JUEVES</option>
    <option value="VIERNES">VIERNES</option>
    <option value="SABADO">SABADO</option>
</select>
            </p>
            <p>
                No. Ruta:<select name="numero" required pattern="[1-9]+" title="Sólo números" >
<option value="">....</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
            </p>
            <input type="submit" values="guardar" name="guardar">
        
        </div>
 
        <!--TERMINACION-->
    
    </form>
 
    <a href="index.php">Regresar</a>
</body>
 

Código CSS:

body{
    width: 100%;
    height: 100%;
    background-color: #fe9;
}
 
div{
    display: none;
}
 
 
.visible{
    display: block;
}
 

amm

[Alexis88]

Aparentemente, todo está bien, solo que el código JavaScript, es decir, todo lo que está entre las etiquetas <script></script> incluidas ellas, deben de ir luego del último elemento del cuerpo del documento y justo antes de la etiqueta </body>. Esto es porque el código se ejecuta de arriba hacia abajo, entonces, cuando carga el código JavaScript estando en la cabecera, aún no cargan los elementos del documento, por lo tanto, no existe ningún elemento con el id 'elige' al que se pueda afectar.

Cambia la ubicación del código JavaScript y tu problema deberá de haberse solucionado.

Saludos

[lizkabbalah]

D: no me salio sigo teniendo lo mismo que ante, de todas maneras muchas gracias por tomarse el tiempo de ayudarme

[lizkabbalah]

ya lo resolví, use un if por cada condición de selección y añadí una libreria .js :D