Zmień div zgodnie z wybranymi polami rozwijanymi

To nie jest dobrze napisane:http://jsfiddle.net/dz5gh7wo/2/

(AKTUALIZUJ :nieco łatwiejszy w utrzymaniu przykład http://jsfiddle.net/dz5gh7wo/7/ )

To, co chcesz zrobić, to dodać detektor zdarzeń przy zmianie, który uruchamia się, gdy zmienią się pola wejściowe.

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

Tutaj dodałem go do wszystkich twoich dziedzin w bardzo niechlujny sposób, ale to tylko w celach edukacyjnych. Wywołuje buildCharacter funkcja.

Następnie definiujemy tę funkcję.

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

Będziesz chciał ukryć wszystkie nieużywane elementy div klas za pomocą niektórych CSS

.class-info {
  display: none
}

i na koniec wywołaj postać budowania podczas ładowania strony

buildCharacter();

Będziesz potrzebować klas na każdym ekranie swojej postaci, aby móc je dowolnie pokazywać i ukrywać.

female-goblin-warrior