Question

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

我已经将代码剥离为该函数的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>

类形式

                           <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>

我无法确定条件是否得到满足，请选择“成人”作为类型。 div永远不会显示。

根据提供的评论进行了更新，仍然没有爱意

Answer 1

您正在按ID选择AdultSection

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

当它实际上是一堂课时...

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

更改为

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

编辑：正如格兰特在评论中指出的那样，您可能还应该为$（document）.ready（{目前未关闭的代码块。）加上右括号。您从技术上也不应在类名，尽管许多javascript库都支持，并且被浏览器广泛处理。

根据选择选项隐藏Div

1 个答案: