Cambiar div según los cuadros desplegables seleccionados

Esto no está bien escrito de ninguna manera:http://jsfiddle.net/dz5gh7wo/2/

(ACTUALIZAR :ejemplo un poco más mantenible http://jsfiddle.net/dz5gh7wo/7/ )

Lo que desea hacer es agregar un detector de eventos de cambio que se active cuando cambien los campos de entrada.

$('#character_race, #character_gender, #character_class').on('change', buildCharacter);    

Aquí lo agregué a todos sus campos de una manera muy descuidada, pero esto es solo con fines educativos. Llama a un buildCharacter función.

Luego definimos esa función.

var buildCharacter = function() {
    var charRace = $('#character_race :selected').text(),
        charGender = $('#character_gender :selected').text(),
        charClass = $('#character_class :selected').text(),
        cssStr = charGender+'-'+charRace+'-'+charClass;
    $('.class-info').hide();
    $('.'+cssStr.toLowerCase()).show();
};

Deberá ocultar todas las divisiones de clase no utilizadas con algo de CSS

.class-info {
  display: none
}

y finalmente llame al personaje de compilación en la carga de la página

buildCharacter();

Necesitará clases en cada una de las pantallas de su personaje para que pueda mostrarlas y ocultarlas a voluntad.

female-goblin-warrior