Hiển thị các trường dựa trên giá trị lựa chọn

Question

Tôi có challange sau.

Tôi có biểu mẫu nhập để người có thể thêm mục nhập mới và khi được chấp thuận, họ cũng có thể chỉnh sửa nó. Thử thách là ẩn các trường cụ thể dựa trên lựa chọn. Khi người dùng thêm mục nhập mới, họ phải chọn một danh mục cụ thể. dựa trên đó, một số trường bị ẩn.

Đây là mã mà tôi đang sử dụng cho đến nay:

<select name="entry.parent" size="1" style="width: 360px;" id="SPCatChooserSl" class="required"> 
<option value="">Selecteer categorie</option> 
<option selected="selected" value="55">- Option 1</option> 
<option value="59">- Option 2</option> 

</select> 

<div id="option1"> 
<p>Hier comes option 1</p> 
</div> 
<div id="option2"> 
<p>Here comes option 2</p> 
</div> 

<script> 
jQuery(function() { 
jQuery('#option1').hide(); 
jQuery('#option2').hide(); 
}); 

jQuery(function() { 
jQuery("#SPCatChooserSl").change(function() { 
    if (this.value == '55') { 
     jQuery('#option1').show(); 
    } else { 
     jQuery('#option1').hide(); 
    } 
    if (this.value == '59') { 
     jQuery('#option2').show(); 
    } else { 
     jQuery('#option2').hide(); 
    } 
    }); 
    }); 
    </script>  

này hoạt động khi người dùng vẫn phải chọn một danh mục. Nó ẩn các trường dựa trên lựa chọn.

Tuy nhiên, khi người dùng chỉnh sửa mục nhập, danh mục đã được chọn và có thể sẽ không bị thay đổi. Do đó, tùy chọn DIVS1 và Option2 bị ẩn và vì người dùng không chọn danh mục, các div sẽ không bao giờ hiển thị.

Vì vậy, câu hỏi đặt ra là: Làm cách nào tôi có thể kiểm tra giá trị cụ thể trong danh sách lựa chọn, hiển thị các trường chính xác mà không cần sử dụng.

Tôi hy vọng rằng câu hỏi/challange của tôi rõ ràng :)

Cảm ơn trước !!!!!!!

Answer 1

Bạn có thể cập nhật các tùy chọn khi tài liệu trở nên sẵn sàng:

jQuery(function() { 
jQuery('#option1').hide(); 
jQuery('#option2').hide(); 
}); 

function updateOption() { 
    jQuery('#option1').toggle(this.value == '55'); 
    jQuery('#option2').toggle(this.value == '59'); 
} 

jQuery(document).ready(function() { 
    jQuery("#SPCatChooserSl").each(updateOption); 
    jQuery("#SPCatChooserSl").change(updateOption); 
}); 

Fiddle: http://jsfiddle.net/Mwnjk/