Cambia div in base alle caselle a discesa selezionate

Questo non è scritto bene in alcun modo:http://jsfiddle.net/dz5gh7wo/2/

(AGGIORNAMENTO :esempio leggermente più gestibile http://jsfiddle.net/dz5gh7wo/7/ )

Quello che vuoi fare è aggiungere un listener di eventi in modifica che si attiva quando i campi di input cambiano.

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

Qui l'ho aggiunto a tutti i tuoi campi in modo molto sciatto, ma questo è solo per scopi educativi. Chiama un buildCharacter funzione.

Quindi definiamo quella funzione.

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();
};

Ti consigliamo di nascondere tutti i div di classe inutilizzati con alcuni CSS

.class-info {
  display: none
}

e infine chiama il personaggio di build al caricamento della pagina

buildCharacter();

Avrai bisogno di classi su ciascuno dei display del tuo personaggio in modo da poterli mostrare e nascondere a piacimento.

female-goblin-warrior