jquery - Jqueryでのフォーム選択

Question

ユーザーが必要な選択オプションを選択することに基づいて、表示したい多くのフォームを作成しました。これを jquery 内に追加して、選択したときにフォームをアニメーション化 (つまり、フェードインとフェードアウト) できるようにする最善の方法は何ですか。

ありがとう、

Answer 1

これを試してください - http://jsfiddle.net/Vn2QG/

$("select").on("change", function() {
    var id = $(this).val();

    $("div:visible").fadeOut('slow', function() {
        $("div#form" + id).fadeIn();
    });
});

Answer 2

http://jqueryui.com/demos/accordion/やhttp://jqueryui.com/demos/tabs/など、jQuery UI から事前に構築されたオプションの使用を検討できます。

自分で構築したい場合は、次から始めることができます。

​<select id="chooser">
    <option value="">Select...</option>
    <option​​​​​ value="formOne">One</option>
    <option value="formTwo">Two</option>
    <option value="formThree">Three</option>
​&lt;/select>

<form id="formOne" class="chooseable">Form One is here.</form>
<form id="formTwo" class="chooseable">Form Two is here.</form>
<form id="formThree" class="chooseable">Form Three is here.</form>​

JavaScript:

jQuery(function($) {
    $('.chooseable').hide();
    var shown = false;
    $('#chooser').change(function() {
        var next = this.value;
        if (shown) {
            $('#'+shown).fadeOut('slow', function() {
                if (next) $('#'+next).fadeIn();
            });
        } else if (next) $('#'+next).fadeIn();
        shown = next;
    });
});

フィドルを参照してください: http://jsfiddle.net/XG87j/

Answer 3

コンテナーのフェードイン/フェードアウトを可能にするjQuery fadeToggle 関数http://api.jquery.com/fadeToggle/を見てください。

次に、select タグで、ユーザーが新しいオプションを選択するたびに発生する onchange イベントを使用します。このイベントが発生すると、$(this).val() で選択された値をキャッチし、正しいフォームでフェードイン/フェードアウトできます。