jQuery - 選擇onchange滑入/滑出div或表格

我試圖通過表單選擇字段顯示僅相關字段取決於初始選擇來增強窗體。jQuery - 選擇onchange滑入/滑出div或表格

這是3個產品的訂單，所有3個產品都有獨特的屬性。

我的想法是隱藏div中的所有內容，然後在選擇產品時顯示相關div。我發現了一些顯示/隱藏div的解決方案，但沒有任何動畫。它不一定是幻燈片，但只是一些不錯的東西！

另一種方法是不是透露一個div，而是加載一個單獨的表單，但這似乎沒有必要。

我不確定我是否需要插件，因爲我對jquery很新穎。

我在HTML是什麼：

<style type="text/css"> 
.hide { 
display:none; 
} 

<select> 
<option value="" >Please select product below</option> 
<option value="pro1">Product 1</option> 
<option value="pro2">Product 2</option> 
</select> 

<div id="pro1" class="hide" >Product 1</div> 
<div id="pro2" class="hide" >Product 2</div>

提前

來源

2010-04-14 slayaz

非常感謝您可以使用效果基本show（）和了slideDown內置效果。

或jQuery的任何其他內置效果。

$(document).ready(function() {  
     $("#selectMenu").bind("change", function() { 
     if ($(this).val() == "pro1") { 
      $("#pro1").slideDown(); 
      $("#pro2").slideUp(); 
     } 
     else if($(this).val() =="pro2") { 
      $("#pro2").slideDown(); 
      $("#pro1").slideUp(); 
     } 
    }); 
});

HTML：

<select id="selectMenu"> 
    <option value="" >Please select product below</option> 
    <option value="pro1">Product 1</option> 
    <option value="pro2">Product 2</option> 
</select>

來源

2010-04-14 11:48:59

尼斯其他動畫一，這比我想象的要容易得多！ – slayaz 2010-04-14 12:34:23

您可以使用jQuery的animate()方法來構建你自己的風格不是預先定義的動畫，如滑動，衰落等

來源

2010-04-14 11:49:34 Sarfraz

jQuery - 選擇onchange滑入/滑出div或表格

回答

相關問題