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

我有一个表格，我需要根据一个下拉框的选择显示四组不同的问题。多亏了本页上的其他一些问题，我已经有了所需的基本脚本，但它在JSFIDLE中不起作用，更不用说实际将它插入到我的文档中了。我在Javascript方面非常薄弱，我正在修改最初没有编写的代码。对于我所做的错事，任何帮助都将不胜感激。我已经创建了一个JSFIDLE（） 以下是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>

提案类别
请选择最能描述您提交内容的类别：
这里需要一些解释性的文字，以便他们知道选择什么。。。为什么不按字母顺序呢


选一个
研究
创新
应用
整合

研究
根据自己的经验或研究报告重要结果，清楚地描述问题；提供上下文和参考；
提供基线数据；解释研究者做了什么以及为什么；并提供结果。

说明你的教学项目：论文中提到的问题、问题或机会，以及为什么它是一个问题
或机会；描述你在你的学生、同事或学校的行为中看到的你想要改变的东西。
描述您希望学生或同事通过项目更好地实现的学习目标


如果您的项目涉及某一特定课程，请简要描述该课程、其学生及其在课程中的位置。


您是如何解决问题、回答问题或抓住机会的？你的方法与其他方法有何不同
其他人尝试过的吗？


评估和基线：说明您如何确定项目的成功和有效性。你可以用
定量或定性数据或两者兼有。


创新
提出教学理论、方法或过程的创新；提供原创和创意
基于自身或他人研究结果的想法；并概述了测试中提出的策略或进度报告
想法的有效性。

描述你论文中提到的计划创新，以及它的动机。描述你在学生身上看到了什么，
你想改变的同事或机构的行为。描述你希望学生或同事达到的学习目标
以更好地实现您的创新成果


如果您的创新涉及某一特定课程，请简要描述该课程、学生及其在课程中的位置。


您的创新与其他人尝试过的创新有何不同？


评估和基线：说明您计划如何确定创新的成功和有效性。


应用
根据理论和文献，描述和评估自己课程中的示范实践。

描述您在课程、课程或计划中应用的理论、方法和修订。描述
你在你的学生、同事或学校的行为中看到了你想要改变的东西。描述学习情况
您希望学生或同事通过您的申请更好地实现的目标。


如果您的申请涉及某一特定课程，请简要描述该课程、其学生及其在课程中的位置。


您的应用程序与其他人尝试过的应用程序有何不同？


评估和基线：说明您是如何确定您的应用程序的成功和有效性的。


整合
以有意义的方式整合他人的研究；比较或对比理论；评论结果；及
为未来的探索提供背景。

指出你正在整合的高等教育教学和学习的广泛领域。描述一下你的论文是如何写的
整合该领域其他人的研究。


比较和对比该领域的理论、创新和应用。


在该区域的选定项目中进行评论。


为未来的探索提供背景和描述。

小提琴：

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

Fiddle：

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

使用fiddle中的代码，您可以使用以下命令：

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

    });
})();

---

另外，请确保您在JSFIDLE中选择了jQuery框架，否则这将不起作用。

使用FIDLE中的代码，您可以使用以下内容：

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

    });
})();

另外，请确保在JSFIDLE中选择了jQuery框架，否则这将不起作用。

尝试以下方法：

$(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 ...
        }
    }

});

注意：我更改了select输入的名称。就个人而言，我喜欢用CamelCase表示ID，用破折号表示类名。

试试这个：

$(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 ...
        }
    }

});

---

注意：我更改了select输入的名称。就我个人而言，我喜欢用CamelCase来表示ID，用破折号来表示类名。

比我快。您可以将选项Selected更改为$this.val（），否？非常感谢大家。关于小提琴的问题，我觉得自己像个白痴，但这就是我们有时真正学习的方式……比我强。你可以改变手术