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

Question

我想用jQuery显示下拉菜单并隐藏它下面的不同div（或textareas）。这里是我的jQuerycode的时刻：

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

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

当我选择在下拉菜单中选择一个不同的选项，这个代码不发生变化。

如果可能，我想将div更改为textareas。谢谢 ：）。 （顺便说一句，在PHP数组有内容，随时与自己的占位符替换）

Answer 1

你的代码的工作，你可以在这里进行测试：http://jsfiddle.net/6XEsx/

东西别的，外面的例子是干扰这里。

顺便说一句，你可以缩短一点，使用multi-selectors和链接，就像这样：

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