Променете div според избраните падащи полета

Това по никакъв начин не е добре написано:http://jsfiddle.net/dz5gh7wo/2/

(АКТУАЛИЗИРАНЕ :малко по-поддържаем пример http://jsfiddle.net/dz5gh7wo/7/ )

Това, което искате да направите, е да добавите слушател на събитие при промяна, който се задейства при промяна на полетата за въвеждане.

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

Тук го добавих към всички ваши полета по много небрежен начин, но това е само за образователни цели. Той извиква buildCharacter функция.

След това дефинираме тази функция.

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

Ще искате да скриете всичките си неизползвани класове divs с малко CSS

.class-info {
  display: none
}

и накрая извикване на символа за изграждане при зареждане на страницата

buildCharacter();

Ще ви трябват класове на всеки от дисплеите на вашите герои, за да можете да ги показвате и скривате по желание.

female-goblin-warrior