jQuery＆下拉菜单隐藏div（或textareas）

I would like to have a drop down menu with jQuery show and hide the different divs (or textareas) below it. Here's my jQuerycode at the moment:

我想有一个带有jQuery show的下拉菜单,并隐藏它下面的不同div(或textareas)。这是我的jQuerycode:

$(document).ready(function(){
    $('#edit1').hide();
    $('#edit2').hide();
        $("#page_selection").change(function(){
        $("#" + this.value).show().siblings().hide();
        });
    $("#page_selection").change();
    });

And html:

<p> 
                <select id="page_selection">
                    <option value="edit1">About All</option>
                    <option value="edit2">Home Introduction</option>
                </select>
                <form method="post" action="page_edit_action.php" />
                    <div name="about_all" id="edit1"><?php echo $content['about_all'] ?></div>
                    <div name="home_introduction" id="edit2"><?php echo $content['home_introduction'] ?></div>
                </form>
                </p>

This code isn't changing when I choose a different option in the drop down menu.

当我在下拉菜单中选择其他选项时,此代码不会更改。

If possible, I'd like to change the divs to textareas. Thanks :). (BTW, the php arrays have content, feel free to replace with your own placeholder)

如果可能的话,我想把div改成textareas。谢谢 :)。 (顺便说一句,php数组有内容,随意替换你自己的占位符)

1 个解决方案

#1

Your code works, you can test it here: http://jsfiddle.net/6XEsx/

你的代码有效,可以在这里测试一下:http://jsfiddle.net/6XEsx/

Something else, outside your example is interfering here.

在你的例子之外的其他东西干扰这里。

As an aside, you can shorten it a bit, using multi-selectors and chaining, like this:

顺便说一下,你可以使用多选择器和链接来缩短它,如下所示:

$(function(){
    $('#edit1, #edit2').hide();
    $("#page_selection").change(function(){
        $("#" + this.value).show().siblings().hide();
    }).change();
});

Here's that version using <textarea> elements like you are after :)

这是使用元素的版本,就像你之后:)</p>

#1