jQuery - 选择 onchange 以滑入/滑出 div 或表单答案

【问题标题】：jQuery - select onchange to slide in / slide out div or formjQuery - 选择 onchange 以滑入/滑出 div 或表单
【发布时间】：2010-04-14 11:45:39
【问题描述】：

我正在尝试通过表单选择字段根据初始选择仅显示相关字段来增强表单。

这是 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>

在此先感谢

【问题讨论】：

标签： jquery select jquery-plugins onchange

【解决方案1】：

您可以使用 slideUp() 和 slideDown 内置效果。

或者 jQuery 的任何其他内置效果。 http://api.jquery.com/category/effects/

$(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>

【讨论】：

不错，这比我想象的要容易得多！

【解决方案2】：

您可以使用 JQuery 的 animate() 方法来构建您自己的动画样式，而不是预定义的动画，例如滑动、褪色等。

【讨论】：