Wijzig div volgens geselecteerde vervolgkeuzelijsten

Dit is op geen enkele manier goed geschreven:http://jsfiddle.net/dz5gh7wo/2/

(UPDATE :iets beter te onderhouden voorbeeld http://jsfiddle.net/dz5gh7wo/7/ )

Wat u wilt doen, is een gebeurtenislistener bij wijziging toevoegen die wordt geactiveerd wanneer de invoervelden veranderen.

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

Hier heb ik het op een zeer slordige manier aan al je velden toegevoegd, maar dit is alleen voor educatieve doeleinden. Het roept een buildCharacter . aan functie.

Dan definiëren we die functie.

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

U wilt al uw ongebruikte klasse-div's verbergen met wat CSS

.class-info {
  display: none
}

en tot slot het build-teken aanroepen bij het laden van de pagina

buildCharacter();

Je hebt klassen nodig op elk van je personageschermen, zodat je ze naar believen kunt tonen en verbergen.

female-goblin-warrior