HTML表单隐藏/显示基于Div

我有一个表单，我需要根据一个下拉框的选择显示四组不同的问题。感谢本页上的其他一些问题，我有我需要的基本脚本，但它不能在JSFiddle中工作，更不用说在我的文档中实际插入它了。我在Javascript方面很弱，我正在修改我最初没有写的代码。任何帮助我做错了，我将不胜感激。我已经创建了一个JSFiddle (http://jsfiddle.net/HZHnT/)这是JS:

$(function(){
    $(".categoryDivs").hide();
    $("#categories-select").change(function(){
        console.log("option changed");
        var optionSelected = $(this).attr("value");
        $(".categoryDivs").hide();
        $("#categoryDiv" + optionSelected).show();
    });
});

，这里是HTML:

<h3>Proposal Category</h3>
<p>Please choose the category that best describes your submission:</h3>
<p> NEEDS TO BE SOME EXPLANATORY TEXT HERE SO THEY KNOW WHAT TO PICK... also why not in alpha order? </p>
<p>
    <select id="categories-select">
        <option value="">Choose One</option>
        <option value="1">Research</option>
        <option value="2">Innovation</option>
        <option value="3">Application</option>
        <option value="4">Integration</option>
    </select>
</p>

<div id="all-categoryDivs">
    <div class="categoryDivs" id="categoryDiv1">
        <h4>Research</h4>
        <p><strong>Reports important results from own experience or research, describes problem clearly; gives context and references; 
        provides baseline data; explains what researcher has done and why; and provides results.</strong></p>
        <p>Indicate your teaching and learning project: the problem, question, or opportunity addressed in your paper and why it was a problem
        or opportunity; Describe what you saw in your students', colleagues', or institution's behavior that you wanted to change. 
        Describe the learning objectives you wanted students or colleagues to better achieve as a result of your project. <br>
        <textarea name="research3" cols="40" rows="4"></textarea></p>

        <p>If your project involved a particular course, briefly describe the course, its students, and its place in the curriculum.<br>
        <p><textarea name="research4" cols="40" rows="4"></textarea></p> 
        <p>How did you solve the problem, answer the question, or address the opportunity? How is your approach different from
        ones that others have tried?<br>
        <textarea name="research5" cols="40" rows="4"></textarea></p> 
        <p>Assessment and baseline: Indicate how you determined the success and effectiveness of your project. You may use 
        quantitative or qualitative data or both.<br>
        <textarea name="research6" cols="40" rows="4"></textarea></p>
        </div>
<div class="categoryDivs" id="categoryDiv2">
       <h4>Innovation</h4>
        <p><strong>Proposes innovation of theory, approach, or process of teaching and learning; provides original and creative
        ideas based on results of research by self or others; and outlines proposed strategy for or progress report in testing
        effectiveness of ideas.</strong></p>
        <p>Describe the planned innovation addressed in your paper and what motivates it. Describe what you see in your students', 
        colleagues', or institution's behavior that you want to change. Describe the learning objectives you want students or colleagues
        to better achieve as a result of your innovation. <br>
        <textarea name="innovation3" cols="40" rows="4"></textarea></p> 
        <p>If your innovation involves a particular course, briefly describe the course, its students, and its place in the curriculum.<br>
        <textarea name="innovation4" cols="40" rows="4"></textarea></p> 
        <p>How is you innovation different from ones that others have tried?<br>
        <textarea name="innovation5" cols="40" rows="4"></textarea></p>
        <p>Assessment and baseline: Indicate how you plan to determine the success and effectiveness of your innovation.<br>
        <textarea name="innovation6" cols="40" rows="4"></textarea></p>
        </div>
    <div class="categoryDivs" id="categoryDiv3">
       <h4>Application</h4>
        <p><strong>Describes and assesses exemplary practice in one's own course, informed by theory and the literature.</strong></p>
        <p>Describes the theory, approach, and revision that you applied in your course, curriculum, or program. Describe
        what you saw in your students', colleagues', or institution's behavior that you wanted to change. Describe the learning
        objectives you wanted students or colleagues to better achieve as a result of your application.<br>
        <textarea name="application3" cols="40" rows="4"></textarea></p> 
        <p>If you application involves a particular course, briefly describe the course, its students, and its place in the curriculum.<br>
        <textarea name="application4" cols="40" rows="4"></textarea></p> 
        <p>How is your application different from ones that others have tried?<br>
        <textarea name="application5" cols="40" rows="4"></textarea></p>
        <p>Assessment and baseline: Indicate how you determined the success and effectiveness of your application.<br>
        <textarea name="application6" cols="40" rows="4"></textarea></p>
        </div>
    <div class="categoryDivs" id="categoryDiv4">
        <h4>Integration</h4>
        <p><strong>Integrates research of others in a meaningful way; compares or contrasts theories; critiques results; and 
        provides context for future exploration.</strong></p>
        <p>Indicate the broad area of teaching and learning in higher education that you are integrating. Describe how your paper
        integrates the research of others in this area.<br>
        <textarea name="integration3" cols="40" rows="4"></textarea></p> 
        <p>Compare and contrast the theories, innovations, and applications in this area.<br>
        <textarea name="integration4" cols="40" rows="4"></textarea></p> 
        <p>Critique results in selected items in this area.<br>
        <textarea name="integration5" cols="40" rows="4"></textarea></p>
        <p>Provide a context and description for future exploration.<br>
        <textarea name="integration6" cols="40" rows="4"></textarea></p>
        </div>
</div>