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