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