javascript - HTML表单基于Div的隐藏/显示

Question

我有一个表单，需要根据一个下拉框的选择来显示四组不同的问题。感谢本页上的一些其他问题，我有了我需要的基本脚本，但它在 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>

Answer 1

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:它在 jsfiddle 中不起作用，因为您没有在左侧面板上启用 jQuery 库。