Ubah div sesuai dengan kotak dropdown yang dipilih

Ini tidak ditulis dengan baik dengan cara apa pun:http://jsfiddle.net/dz5gh7wo/2/

(PERBARUI :contoh yang sedikit lebih mudah dipelihara http://jsfiddle.net/dz5gh7wo/7/ )

Yang ingin Anda lakukan adalah menambahkan pendengar acara perubahan yang diaktifkan saat kolom input berubah.

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

Di sini saya menambahkannya ke semua bidang Anda dengan cara yang sangat ceroboh, tetapi ini hanya untuk tujuan pendidikan. Itu memanggil buildCharacter fungsi.

Kemudian kita definisikan fungsi tersebut.

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

Anda ingin menyembunyikan semua div kelas yang tidak digunakan dengan beberapa CSS

.class-info {
  display: none
}

dan terakhir panggil karakter build saat memuat halaman

buildCharacter();

Anda akan membutuhkan kelas pada setiap tampilan karakter Anda sehingga Anda dapat menampilkan dan menyembunyikannya sesuka hati.

female-goblin-warrior