Isso não está bem escrito de forma alguma:http://jsfiddle.net/dz5gh7wo/2/ a>
(ATUALIZAÇÃO :exemplo um pouco mais sustentável http://jsfiddle.net/dz5gh7wo/7/ )
O que você deseja fazer é adicionar um ouvinte de evento on change que é acionado quando os campos de entrada são alterados.
$('#character_race, #character_gender, #character_class').on('change', buildCharacter);
Aqui eu adicionei a todos os seus campos de uma maneira muito descuidada, mas isso é apenas para fins educacionais. Ele chama um
buildCharacter função. Então definimos essa função.
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();
};
Você vai querer esconder todas as suas divs de classe não utilizadas com algum CSS
.class-info {
display: none
}
e, finalmente, chame o caractere de construção no carregamento da página
buildCharacter(); Você precisará de classes em cada uma das telas de seus personagens para poder mostrá-los e escondê-los à vontade.
female-goblin-warrior 
