Скрыть Div на основе опции выбора - PullRequest
Новая
       15

Скрыть Div на основе опции выбора

1 голос
/ 26 июня 2019

У меня есть форма, в которой мне нужно показать / скрыть разделы на основе значения поля выбора

Я очистил код до 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 никогда не отображается.

Обновлено на основе комментариев, Все еще нет любви

1 Ответ

1 голос
/ 26 июня 2019

Вы выбираете AdultSection по Id 

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

Когда это действительно класс ... 

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

Изменить на 

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

Редактировать: какГрант указывает на то, что в комментариях у вас также должны быть закрывающие скобки для вашего $ (document) .ready ({блок, который в настоящее время не закрыт. Вы также технически не должны использовать [или] в имени класса, хотя многие библиотеки javascript делают, и это широко обрабатывается браузерами.

...