Jquery中的表格选择

Question

我建立了许多表单，现在我想根据用户选择nessecary select选项来显示。 什么是最好的方式来添加这个jQuery中，这样我就可以动画的形式（即淡入淡出），当选择。

感谢，

Answer 1

您可以考虑使用从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 2

浏览jQuery fadeToggle功能http://api.jquery.com/fadeToggle/，让您淡入/淡出的容器。

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

Answer 3

试试这个 - http://jsfiddle.net/Vn2QG/

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

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