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

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

2 个答案: