Question

假设我有一个带下拉菜单的表单。下拉菜单有两个选项。如果用户选择第二个选项，则之前不可见的三个附加字段将变为可见。这是用jQuery实现的方法：

$(document).ready(function() {
    $('#my_dropdown').change(function() {
        if ($(this).val() == 'option2') {
            $('#foo, #bar, #baz').slideDown();
        }
        else {
            $('#foo, #bar, #baz').slideUp();
        }
    });
});

此方法的问题在于，首次加载页面时，下拉菜单默认选择了第一个选项，用户可能会看到三个字段向上滑动，这可能看起来很刺耳。所以这是另一种做同样事情的方法，但没有我刚才描述的问题：

function dropdown_handler(animate) {
    if (animate == true) {
        if ($('#my_dropdown').val() == 'option2') {
            $('#foo, #bar, #baz').slideDown();
        }
        else {
            $('#foo, #bar, #baz').slideUp();
        }
    }
    else {
        if ($('#my_dropdown').val() == 'option2') {
            $('#foo, #bar, #baz').show();
        }
        else {
            $('#foo, #bar, #baz').hide();
        }
    }
}

$(document).ready(function() {
    dropdown_handler(false);

    $('#my_dropdown').change(function() {
        dropdown_handler(true);
    });
});

然而，这种方法的问题在于它看起来相当臃肿。如何有效地解决这个问题？

Answer 1

您可以在页面加载时触发更改

 $('#my_dropdown').change(function() {
         if ($(this).val() == 'option2') {
            $('#foo, #bar, #baz').slideDown();
        }
        else {
            $('#foo, #bar, #baz').slideUp();
        }
 }).change();

此外，您需要在CSS中设置此样式。这样可确保在第一次加载页面时隐藏这些元素。

#foo, #bar, #baz 
{
   display: none;
}

使用jQuery有效地滑动或隐藏表单字段

1 个答案: