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> 

如果用戶手動選擇「正在使用」，這將起作用。但是，如果用戶選擇'Employed'，則提交表單，並在表單上顯示驗證錯誤（在我的情況下，使用PHP重新插入表單中的所有值並使'Employed'爲'selected'選項在下拉列表中），「就業」部分將返回已關閉。顯示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'); 
});