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

小提琴：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库。

Answer 2

使用小提琴中的代码，您可以使用以下内容：

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

    });
})();

还要确保在jsFiddle中选择了jQuery框架，否则这将不起作用。

Answer 3

试试这个：

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

});

注意：我更改了您的选择输入的名称。就个人而言，我喜欢使用CamelCase作为ID，并使用破折号作为类名。

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

3 个答案: