jquery - Jquery中的表单选择

Question

我已经构建了许多我现在想要根据用户选择 nessecary 选择选项来显示的表单。在 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>
​&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/它允许您淡入/淡出容器。

然后，在您的选择标签上，使用每次用户选择新选项时触发的 onchange 事件。触发此事件时，您可以捕获使用 $(this).val() 选择的值并淡入/淡出正确的表单。