Ocultar y mostrar campos via select

[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