Skift div i henhold til de valgte rullemenuer

Dette er på ingen måde godt skrevet:http://jsfiddle.net/dz5gh7wo/2/

(OPDATERING :lidt mere vedligeholdelsesvenligt eksempel http://jsfiddle.net/dz5gh7wo/7/ )

Det, du vil gøre, er at tilføje en hændelseslytter ved ændring, der udløses, når inputfelterne ændres.

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

Her har jeg tilføjet det til alle dine felter på en meget sjusket måde, men dette er kun til uddannelsesformål. Den kalder en buildCharacter funktion.

Så definerer vi den funktion.

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

Du vil gerne skjule alle dine ubrugte klasse-div'er med nogle CSS

.class-info {
  display: none
}

og kald endelig build-tegn ved sideindlæsning

buildCharacter();

Du skal bruge klasser på hver af dine karakterskærme, så du kan vise og skjule dem efter behag.

female-goblin-warrior