Mostrar div utilizando select

[silvasnuve]

Buenas Noches.!
Alguien me podría ayudar con un problema que se me presento utilizando el select de acuerdo a los option me muestre el div indicado para cada option. Primero seleccionando la opción al darle click al botton que me muestre el div.

Código HTML:

valor1:
            <select name="v1">
            <option value="op1">opcion1</option>
            <option value="op2">opcion2</option>
            <option value="op3">opcion3</option>
            <option value="op4">opcion4</option>
            <option value="op5">opcion5</option>
            </select>
        
<button class="registro" type="submit" onClick="ingreso()">INGRESAR</button>
 

[Alexis88]

Hazlo así:

Código Javascript:

var select = document.querySelector("[name=v1]"),
    button = document.querySelector(".registro"),
    divs = document.querySelectorAll("[id^=op]");
 
button.addEventListener("click", function(){
    [].forEach.call(divs, function(div){
        div.style.display = div.id == select.value ? "block" : "none"; 
    });
}, false);
 

Lo que hago es simple. Primero, tomo al combo, al botón y a los elementos <div> cuyos id empiecen con 'op' (esto basado en los valores del combo). Luego, cuando pulsemos el botón, recorremos al conjunto de elementos <div> y, en cada iteración, comparamos el id de cada uno de ellos con el valor seleccionado en el combo. Cuando los valores coincidan, mostramos al <div> que corresponda, caso contrario, lo ocultamos.



No olvides colocar el código JavaScript después de todos los elementos del documento y antes de la etiqueta </body> para que surta efecto.

Saludos

[julslash]

y en caso que quieras que uno de esos div salga previamente al abrir la pagina para luego por ti mismo seleccionar otro? como lo harias?

[Alexis88]

Iniciado por julslash

y en caso que quieras que uno de esos div salga previamente al abrir la pagina para luego por ti mismo seleccionar otro? como lo harias?

Tomas al primero de los elementos <div> y lo muestras:

Código Javascript:

divs[0].style.display = "block";
 

Saludos

[silvasnuve]

Gracias era lo que andaba buscando, pero tengo otro inconveniente.
todos mis elementos los tengo dentro de un form para conectarlo con mi base de datos se comporta extraño aparte los debo de meter dentro de otro div para los estilo y se desaparese