選択したドロップダウンボックスに応じてdivを変更します

これは決してうまく書かれていません： http://jsfiddle.net/dz5gh7wo/2/

（更新 ：もう少し保守しやすい例 http://jsfiddle.net/dz5gh7wo/7/ ）

実行したいのは、入力フィールドが変更されたときに起動するonchangeイベントリスナーを追加することです。

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

未使用のクラスdivをすべてCSSで非表示にする必要があります

.class-info {
  display: none
}

最後に、ページの読み込み時にビルド文字を呼び出します

buildCharacter();

自由に表示および非表示にできるように、各キャラクターディスプレイにクラスが必要になります。

female-goblin-warrior