Jquery中的表单选择

Question

我已经根据用户选择nessecary select选项构建了许多我想要显示的表单。 在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

您可以考虑使用jQuery UI中的预建选项，例如http://jqueryui.com/demos/accordion/或http://jqueryui.com/demos/tabs/

如果您想自己构建它，可以从：

开始

​<select id="chooser">
    <option value="">Select...</option>
    <option​​​​​ value="formOne">One</option>
    <option value="formTwo">Two</option>
    <option value="formThree">Three</option>
​</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（）选择的值并淡入/淡出正确的表单。