Thay đổi div theo các hộp thả xuống đã chọn

Điều này không được viết tốt bằng bất kỳ phương tiện nào: http://jsfiddle.net/dz5gh7wo/2/

( CẬP NHẬT :ví dụ dễ bảo trì hơn một chút http://jsfiddle.net/dz5gh7wo/7/ )

Những gì bạn muốn làm là thêm một trình xử lý sự kiện khi thay đổi sẽ kích hoạt khi các trường đầu vào thay đổi.

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

Ở đây tôi đã thêm nó vào tất cả các lĩnh vực của bạn một cách rất cẩu thả, nhưng điều này chỉ dành cho mục đích giáo dục. Nó gọi một buildCharacter chức năng.

Sau đó, chúng tôi xác định chức năng đó.

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ạn sẽ muốn ẩn tất cả các div lớp không sử dụng của mình bằng một số CSS

.class-info {
  display: none
}

và cuối cùng gọi ký tự xây dựng khi tải trang

buildCharacter();

Bạn sẽ cần các lớp trên mỗi màn hình nhân vật của mình để có thể hiển thị và ẩn chúng theo ý muốn.

female-goblin-warrior