Jquery 基于选择选项隐藏Div

我有一个表单，需要根据选择框值显示/隐藏部分

我已经将代码剥离为这个函数的jquery。已验证正在设置字段值，但表单上没有更改

<script type="text/JavaScript">
    $(document).ready(function(){
        $('#patientType').change(function(){
            if ($(this).val() == 'Adult'){
                $(".adultSection").show();
                $(".appregnumber").addClass('validate[required]');

                $(".minorSection").hide();
                $(".minor_patient_information").removeClass('validate[required]'); 
             }

                else if ($(this).val() == 'Minor'){
                    $(".adultSection").hide();
                    $(".appregnumber").removeClass('validate[required]');

                    $(".minorSection").show();
                    $(".minor_patient_information").addClass('validate[required]');
                }

                else{
                    $(".adultSection").hide();
                    $(".appregnumber").removeClass('validate[required]');

                    $(".minorSection").hide();
                    $(".minor_patient_information").removeClass('validate[required]');
                }         
             }       
        });

    </script>

$（文档）.ready（函数（）{
$（'#patientType'）。更改（函数（）{
if（$（this）.val（）=='成人'）{
$（“.adultSection”）.show（）；
$（“.appregnumber”）.addClass（'validate[required]”）；
$（“.minorSection”）.hide（）；
$（“.minor_patient_information”）.removeClass（'验证[必需]）；
}
else if（$（this）.val（）=='Minor'）{
$（“.adultSection”）.hide（）；
$（“.appregnumber”）.removeClass（'validate[required]”）；
$（“.minorSection”）.show（）；
$（“.minor_patient_information”）.addClass（'validate[required]”）；
}
否则{
$（“.adultSection”）.hide（）；
$（“.appregnumber”）.removeClass（'validate[required]”）；
$（“.minorSection”）.hide（）；
$（“.minor_patient_information”）.removeClass（'验证[必需]）；
}         
}       
});

课堂形式

                           <div class="form-section">
                            <span class="select-box">
                                <select id="patientType"
                                        size="1"
                                        class="CGpatient_type validate[required]">
                                    <option value="">Select your gender designation *</option>
                                    <option value="Adult">Adult Patient</option>
                                    <option value="Minor">Minor Patient (under 18)</option>
                                </select>
                            </span> 
                         </div> 

                    <div class="adultSection" style="display:none;">
                        <div class="clearfix"></div>
                        <br/>
                        <br/>
                        <table>
                            <tr>
                                <td class="h1">Patient Application Number</td>
                                <td class="h2"></td>
                                <td class="d3"></td>
                            </tr>
                        </table>
                        <div class="form-three-section">
                            <p>
                                <input type="text" id="App_Reg_Number__c"
                                         placeholder="Patient Application Number *"
                                         size="40"
                                         styleClass="appregnumber"/>
                            </p>
                        </div>
                    </div>

                    <div class="clearfix"></div>

选择您的性别名称*
成年病人
未成年人（18岁以下）




病人申请号码

我无法判断是否满足条件，请选择成人作为类型。从未显示div

---

根据提供的评论更新，仍然没有爱情

您正在按Id选择成人节

$("#adultSection").show();

当它实际上是一个类

<div class="AdultSection" style="display:none;">

编辑：

---

正如格兰特在评论中指出的那样，您的$（document）.ready（{block，当前未关闭。从技术上讲，您也不应该使用[or]在类名中，虽然许多javascript库都有，而且浏览器也广泛地处理它。

我知道它们可能不会导致破坏，但您可以在回答中补充一点，

$（document）.ready

没有右括号，用户有括号[]在类名中，这是非法的。@GrantNoe大多数浏览器都会很高兴地处理这两种情况，并且仍然运行JavaScripts。正如您所说，它很可能在库中使用（在这种情况下很可能是一个验证器）：我以前曾接受以下线程作为福音：似乎不一致，但我知道大多数规则都有例外。为什么在这里使用类？这不应该是一个ID吗？

adultSection

在示例HTML中不引用一组输入字段，而是一个特定的

@Jeff在OPs orig中为div提供了一个这样的类最后的代码。我不是在猜测他的意图，也许他稍后会添加另一个元素，并希望同时显示/隐藏。我只是在说如何使他的代码可以正常工作。你可以将其更改为一个ID，使其成为纯粹的代码，但这并不重要，因为在他使用的任何框架中都不可能存在冲突的“AdultSection”类-它会的无论哪种方式都是一样的，函数只调用一次，而不是在一个紧密的循环中，所以性能上的细微差异无关紧要。如果我们是在codereview上，那么我可能会提到我按照建议将其更新为“``$（“.adultSelection”）.show（）；“``相同的结果如果doctype错误，类名将区分大小写。请尝试将两者更改为相同的大小写，即adultSection和adultSection。我们看不到文档的标题，因此不知道是否是这样，但值得一试。我假设控制台中没有错误？我更新了语法，仍然没有love。如果您需要，我可以向您发送链接我可以看一下控制台。它对我有用，我已经将代码复制并粘贴到这个小提琴上了：它在那里工作。因此，要么是更广泛的代码中有一个外部DOM元素影响代码的执行，要么是发生了其他事情。minorSection在HTML中出现在adultSection之前吗？adultSection出现在minorSection之前。我尝试将隐藏/显示指向其他位置，但未成功。这位于Visualforce SF页面上。同一平台上的Jquery正在处理复选框。

$(".adultSection").show();