Změňte div podle vybraných rozevíracích polí

Tohle není v žádném případě dobře napsané:http://jsfiddle.net/dz5gh7wo/2/

(AKTUALIZACE :o něco lépe udržovatelný příklad http://jsfiddle.net/dz5gh7wo/7/ )

Co chcete udělat, je přidat posluchač události při změně, který se spustí, když se změní vstupní pole.

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

Zde jsem to přidal do všech vašich oborů velmi nedbalým způsobem, ale to je jen pro vzdělávací účely. Volá buildCharacter funkce.

Poté tuto funkci definujeme.

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

Budete chtít skrýt všechny své nepoužívané třídy div pomocí nějakého CSS

.class-info {
  display: none
}

a nakonec zavolejte znak sestavení při načtení stránky

buildCharacter();

Na každém displeji postavy budete potřebovat třídy, abyste je mohli libovolně zobrazovat a skrývat.

female-goblin-warrior