Modifier la div en fonction des listes déroulantes sélectionnées

Ce n'est en aucun cas bien écrit :http://jsfiddle.net/dz5gh7wo/2/

(MISE À JOUR :exemple légèrement plus maintenable http://jsfiddle.net/dz5gh7wo/7/ )

Ce que vous voulez faire, c'est ajouter un écouteur d'événement on change qui se déclenche lorsque les champs de saisie changent.

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

Ici, je l'ai ajouté à tous vos champs d'une manière très bâclée, mais c'est juste à des fins éducatives. Il appelle un buildCharacter fonction.

Ensuite, nous définissons cette fonction.

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

Vous voudrez masquer tous vos divs de classe inutilisés avec du CSS

.class-info {
  display: none
}

et enfin appeler le caractère de construction au chargement de la page

buildCharacter();

Vous aurez besoin de classes sur chacun de vos affichages de personnages afin de pouvoir les afficher et les masquer à volonté.

female-goblin-warrior