Javascript jquery在用户选择和表单验证时显示/隐藏

我有“就业状况”部分的表格。如果用户从下拉列表中选择“employment”（#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>

var employ=jQuery（“#employment_status”）；
var select=this.value；
employ.change（函数（）{
if（$（this）.val（）=='Employed'）{
$（#employed'）。show（2000，“easoutexpo”）；
}else$（'#employed'）.hide（2000，'easoutexpo'）；
});

如果用户手动选择“Employed”（已雇用），则此操作有效。但是，如果用户选择“Employee”，提交表单，并且表单上出现验证错误（在我的例子中，使用PHP重新插入表单中的所有值，并使“Employed”成为下拉列表中的“selected”选项），“Employee”部分将关闭。显示div部分的唯一方法是摆弄另一个值，然后再次手动选择'Employed'

---

是一种解决方案，用于在使用“selected”值的情况下使窗体返回并打开此div

一种可能的解决方案是在注册处理程序后手动触发更改事件

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

试试这个

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