Ändern Sie div gemäß den ausgewählten Dropdown-Feldern

Das ist keineswegs gut geschrieben:http://jsfiddle.net/dz5gh7wo/2/

(AKTUALISIEREN :etwas besser wartbares Beispiel http://jsfiddle.net/dz5gh7wo/7/ )

Was Sie tun möchten, ist, einen On-Change-Ereignis-Listener hinzuzufügen, der ausgelöst wird, wenn sich die Eingabefelder ändern.

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

Hier habe ich es auf sehr schlampige Weise zu all Ihren Feldern hinzugefügt, aber dies dient nur zu Bildungszwecken. Es ruft einen buildCharacter auf Funktion.

Dann definieren wir diese Funktion.

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

Sie werden alle Ihre ungenutzten Klassen-Divs mit etwas CSS verstecken wollen

.class-info {
  display: none
}

und rufe schließlich build character beim Laden der Seite auf

buildCharacter();

Sie benötigen Klassen auf jeder Ihrer Charakteranzeigen, damit Sie sie nach Belieben ein- und ausblenden können.

female-goblin-warrior