0

ドロップダウンメニューのあるフォームがあるとしましょう。ドロップダウン メニューには 2 つのオプションがあります。ユーザーが 2 番目のオプションを選択すると、以前は非表示だった 3 つの追加フィールドが表示されます。これは、jQuery でそれを実装する方法です。

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

この方法の問題点は、ページが最初にロードされ、ドロップダウン メニューで最初のオプションがデフォルトで選択されている場合、ユーザーには 3 つのフィールドが上にスライドして表示され、不快に見える可能性があることです。したがって、同じことを行う別の方法がありますが、今説明した問題はありません。

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

ただし、この方法の問題点は、かなり肥大化しているように見えることです。この問題を効率的に解決するにはどうすればよいでしょうか。

4

1 に答える 1

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;
}
于 2012-10-01T22:14:25.507 に答える