Ändra div enligt valda rullgardinsrutor

Det här är inte välskrivet på något sätt:http://jsfiddle.net/dz5gh7wo/2/

(UPPDATERA :något mer underhållbart exempel http://jsfiddle.net/dz5gh7wo/7/ )

Vad du vill göra är att lägga till en händelseavlyssnare vid förändring som aktiveras när inmatningsfälten ändras.

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

Här har jag lagt till det till alla dina fält på ett väldigt slarvigt sätt, men det här är bara i utbildningssyfte. Den anropar en buildCharacter funktion.

Sedan definierar vi den funktionen.

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 kommer att vilja dölja alla dina oanvända klass divs med någon CSS

.class-info {
  display: none
}

och slutligen anropa byggkaraktär vid sidladdning

buildCharacter();

Du behöver klasser på var och en av dina karaktärsskärmar så att du kan visa och dölja dem efter behag.

female-goblin-warrior