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