使用jQuery效果来改变div的内容?

时间:2011-03-08 11:16:48

标签: php javascript jquery html

我有一个表单,我想根据下拉列表的选定值更改它的内容。以下所有内容都将用于PHP文件中。

看起来像这样:

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

建议的解决方案如下

您可以使用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> 

我的问题如何添加幻灯片/缩小脚本以及是否有其他方法可以解决此问题?

谢谢!

1 个答案:

答案 0 :(得分:2)

  

我的问题是如何添加   幻灯片/向下脚本和是否有任何   处理这个的其他方法?

如果您制定约会<option/>的值与您要显示的div的ID相同,那么您可以将更改事件更改为如下所示:

$("#selectMenu").bind("change", function() {
    $(".hide").slideUp().filter("#" + $(this).val()).slideDown();
});

jsfiddle上的示例。