HTML form hide/show based on Div

Question

I have a form that I need to display four different sets of questions depending on the selection of one drop down box. Thanks to some of the other questions on this page, I have the basic scripts of what I need but it is not working in JSFiddle, let alone actually inserting it in my document. I am very weak at Javascript and I am revising code I originally didn't write. Any help with what I am doing wrong would be appreciated. I have created a JSFiddle (http://jsfiddle.net/HZHnT/) Here is the JS:

$(function(){

    $(".categoryDivs").hide();

    $("#categories-select").change(function(){
        console.log("option changed");

        var optionSelected = $(this).attr("value");
        $(".categoryDivs").hide();
        $("#categoryDiv" + optionSelected).show();

    });
});

and here is the 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>

Answer 1

Try this:

$(function(){
    $("#categoriesSelect").change(function(event){
        switch( $(this).val() ) {
            case 1: // This value needs to match the value of your select option.
               $('div:not(#categoryDiv1)').hide(); // Hide all divs not with that id.
               $('#categoryDiv1').show();  // Show the correct div.
               break;
            case 2: // This value needs to match the value of your select option.
               $('div:not(#categoryDiv2)').hide(); // Hide all divs not with that id.
               $('#categoryDiv2').show(); // Show the correct div.
               break;

            ... and so on ...
        }
    }

});

NOTE: I changed the name of your select input. Personally, I like to use CamelCase for ID's and dashes for class names.

Answer 2

Using the code in your fiddle, you can use the following:

$(function(){

    $(".categoryDivs").hide();

    $("#categories-select").change(function(){
        console.log("option changed");

        var optionSelected = $(this).val(); //.val() will get the value you for you
        $(".categoryDivs").hide();
        $("#categoryDiv" + optionSelected).show();

    });
})();

Also make sure you have the jQuery framework selected in jsFiddle or this won't work.

Answer 3

Fiddle : http://jsfiddle.net/HZHnT/1/

JS :

$(function(){

    $(".categoryDivs").hide();

    $("#categories-select").change(function(){
        console.log("option changed");

        var optionSelected = $(this).find('option:selected').val();
        $(".categoryDivs").hide();
        $("#categoryDiv" + optionSelected).show();

    });
});

PS : It didn't work in the jsfiddle because you didn't enable the jQuery library on left panel.