jQuery顯示/隱藏用戶選擇和表單驗證

Question

我有帶有“就業狀況”部分的表格。 如果用戶從下拉列表（#employment_status）中選擇“就業”，則以下jQuery代碼將顯示一個附加的div部分（從隱藏處開始），其中包含供用戶填寫的更多字段：

<script type="text/javascript">
var employ = jQuery('#employment_status');
var select = this.value;
employ.change(function() {
    if ($(this).val() == 'Employed' ){
        $('#employed').show(2000, 'easeOutExpo');
    } else $('#employed').hide(2000, 'easeOutExpo');
});
</script>

如果用戶手動選擇“已雇用”，則此方法有效。 但是，如果用戶選擇“就業”，提交表單，並且表單上顯示驗證錯誤（在我的例子中，PHP將重新插入表單中的所有值並使“就業”成為“選定”選項） （在下拉菜單中），“就業”部分將重新關閉 。 顯示div部分的唯一方法是擺弄另一個值，然后再次手動選擇“ Employed”。

解決方案：如果使用“選定”值，則使該表單在此div打開的情況下返回。

Answer 1

一種可能的解決方案是在注冊處理程序之后手動觸發更改事件

var employ = jQuery('#employment_status');
var select = this.value;
employ.change(function () {
    if ($(this).val() == 'Employed') {
        $('#employed').show(2000, 'easeOutExpo');
    } else {
        $('#employed').hide(2000, 'easeOutExpo')
    };
}).change(); //trigger the change event manuall to set the initial state

Answer 2

嘗試這個

var employ = jQuery('#employment_status');

// check when form load
if ($('#employment_status').val() == 'Employed' )
{
        $('#employed').show(2000, 'easeOutExpo');
} 
else
{
        $('#employed').hide(2000, 'easeOutExpo');
}

employ.change(function() {
    if ($(this).val() == 'Employed' ){
        $('#employed').show(2000, 'easeOutExpo');
    } else $('#employed').hide(2000, 'easeOutExpo');
});