大家好，需要您的帮助来在php中显示或隐藏Div

Question

我有一个选择块，其中包含三类元素以及与这些类别关联的 Div。我希望如果我们选择一个类别，则会显示与该类别关联的 div。否则，就让他们隐藏起来。我希望仅当我们选择怀孕妻子时才显示以下 div：丈夫姓名、怀孕号码。但是，当我这样做时，future_name div 可以正常工作，但 number_pregnacy 却不能正常工作。这是代码：

<div class="modal-body row">
                <form role="form" action="patient/addNew" class="clearfix" method="post" enctype="multipart/form-data">
                    <div class="form-group col-md-6">
                        <label for="exampleInputEmail1"><?php echo lang('category'); ?></label>
                        <select class="form-control m-bot15" name="categorie" value='' id="category" onchange="changeCategorie()">

                            <option value="F#" > Sélect a category </option>
                            <option value="pregnant_wife" <?php
                            if (!empty($patient->category)) {
                                if ($patient->category== 'pregnantWife') {
                                    echo 'selected';
                                }
                            }
                            ?> > pregnant_wife </option>

                            <option value="Personnal" <?php
                            if (!empty($patient->category)) {
                                if ($patient->category== 'Personnal') {
                                    echo 'selected';
                                }
                            }
                            ?> > Personnal</option>
                            <option value="Other" <?php
                            if (!empty($patient->category)) {
                                if ($patient->category== 'Other') {
                                    echo 'selected';
                                }
                            }
                            ?> > Other</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="exampleInputEmail1"><?php echo lang('name'); ?></label>
                        <input type="text" class="form-control" name="name" id="exampleInputEmail1" value='' placeholder="">
                    </div>

                    <div class="form-group col-md-6">
                        <label for="exampleInputEmail1"><?php echo lang('email'); ?></label>
                        <input type="text" class="form-control" name="email" id="exampleInputEmail1" value='' placeholder="">
                    </div>
                    <div class="form-group col-md-6" id="divUsband">
                        <label for="exampleInputEmail1"><?php echo lang('name_husband'); ?></label>
                        <input type="text" class="form-control" name="name_husband" id="nameUs" placeholder="">
                    </div>
                    <div class="form-group col-md-6" id="divEnfants">
                        <label for="exampleInputEmail1"><?php echo lang('number_pregnancy'); ?></label>
                        <input type="number" class="form-control" name="number_pregnancy" id="numberPregnancy" placeholder="">
                    </div>

                    <div class="form-group col-md-6">
                        <label for="exampleInputEmail1"><?php echo lang('password'); ?></label>
                        <input type="password" class="form-control" name="password" id="exampleInputEmail1" placeholder="">
                    </div>


                    <div class="form-group col-md-6">
                        <label for="exampleInputEmail1"><?php echo lang('address'); ?></label>
                        <input type="text" class="form-control" name="address" id="exampleInputEmail1" value='' placeholder="">
                    </div>

                    <div class="form-group col-md-6">
                        <label for="exampleInputEmail1"><?php echo lang('andtecedentMed'); ?></label>
                        <input type="text" class="form-control" name="andtecedentMed" id="exampleInputEmail1" value='' placeholder="">
                    </div>

                    <div class="form-group col-md-6">
                        <label for="exampleInputEmail1"><?php echo lang('andtecedentFam'); ?></label>
                        <input type="text" class="form-control" name="andtecedentFam" id="exampleInputEmail1" value='' placeholder="">
                    </div>

                    <div class="form-group col-md-6">
                        <label for="exampleInputEmail1"><?php echo lang('taille'); ?></label>
                        <input type="text" class="form-control" name="taille" id="exampleInputEmail1" value='' placeholder="">
                    </div>

                    <div class="form-group col-md-6">
                        <label for="exampleInputEmail1"><?php echo lang('poids'); ?></label>
                        <input type="text" class="form-control" name="poids" id="exampleInputEmail1" value='' placeholder="">
                    </div>

                    <div class="form-group col-md-6">
                        <label for="exampleInputEmail1"><?php echo lang('phone'); ?></label>
                        <input type="text" class="form-control" name="phone" id="exampleInputEmail1" value='' placeholder="">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="exampleInputEmail1"><?php echo lang('sex'); ?></label>
                        <select class="form-control m-bot15" name="sex" value=''>

                            <option value="Masculin" <?php
                            if (!empty($patient->sex)) {
                                if ($patient->sex == 'Masculin') {
                                    echo 'selected';
                                }
                            }
                            ?> > Masculin </option>
                            <option value="Féminin" <?php
                            if (!empty($patient->sex)) {
                                if ($patient->sex == 'Féminin') {
                                    echo 'selected';
                                }
                            }
                            ?> > Féminin </option>
                            <option value="Autres" <?php
                            if (!empty($patient->sex)) {
                                if ($patient->sex == 'Autres') {
                                    echo 'selected';
                                }
                            }
                            ?> > Autres </option>
                        </select>
                    </div>

                    <div class="form-group col-md-6">
                        <label><?php echo lang('birth_date'); ?></label>
                        <input class="form-control form-control-inline input-medium default-date-picker" type="text" name="birthdate" value="" placeholder="" readonly="">      
                    </div>


                    <div class="form-group col-md-6">
                        <label for="exampleInputEmail1"><?php echo lang('blood_group'); ?></label>
                        <select class="form-control m-bot15" name="bloodgroup" value=''>
                            <?php foreach ($groups as $group) { ?>
                                <option value="<?php echo $group->group; ?>" <?php
                                if (!empty($patient->bloodgroup)) {
                                    if ($group->group == $patient->bloodgroup) {
                                        echo 'selected';
                                    }
                                }
                                ?> > <?php echo $group->group; ?> </option>
                                    <?php } ?> 
                        </select>
                    </div>

                    <div class="form-group col-md-6">    
                        <label for="exampleInputEmail1"><?php echo lang('doctor'); ?></label>
                        <select class="form-control js-example-basic-single"  name="doctor" value=''> 
                            <option value=""> </option>
                            <?php foreach ($doctors as $doctor) { ?>                                        
                                <option value="<?php echo $doctor->id; ?>"><?php echo $doctor->name; ?> </option>
                            <?php } ?> 
                        </select>
                    </div>



                    <div class="form-group last col-md-6">
                        <label class="control-label">Charger image</label>
                        <div class="">
                            <div class="fileupload fileupload-new" data-provides="fileupload">
                                <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                                    <img src="//www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
                                </div>
                                <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                <div>
                                    <span class="btn btn-white btn-file">
                                        <span class="fileupload-new"><i class="fa fa-paper-clip"></i> Selectionner image</span>
                                        <span class="fileupload-exists"><i class="fa fa-undo"></i> Changer</span>
                                        <input type="file" class="default" name="img_url"/>
                                    </span>
                                    <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> Enlever</a>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!--
                                        <div class="form-group last col-md-6">
                                            <div style="text-align:center;" class="col-md-12">
                                                <video id="video" width="200" height="200" autoplay></video>
                                                <div class="snap" id="snap">Capture Photo</div>
                                                <canvas id="canvas" width="200" height="200"></canvas>
                                                Right click on the captured image and save. Then select the saved image from the left side's Select Image button.
                                            </div>
                                        </div>
                    -->


                    <!-- <div class="form-group col-md-6">
                        <input type="checkbox" name="sms" value="sms"> <?php echo lang('send_sms') ?><br>
                    </div> -->


                    <section class="col-md-12">
                        <button type="submit" name="submit" class="btn btn-info pull-right"><?php echo lang('submit'); ?></button>
                    </section>
                </form>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

这是 JavaScript 代码：

var categorie = document.getElementById("categorie");
                            divUsband.style.display = 'none';
//                            divEnfants.style.display = 'none';


                            function changeCategorie() {
                                if (categorie.value == "FemmeEnceinte") {
                                    divUsband.style.display = 'block';
//                                    divEnfants.style.display = 'block';
                                } else {
                                    divUsband.style.display = 'none';
//                                    divEnfants.style.display = 'none';
                                }

                            }

我想隐藏这两个div： 直到我选择Pregnant_wife选项

Answer 1

首先，您的 HTML 中有很多错误。当您在元素上使用 id 属性时，它应该是唯一的。其他元素不应具有相同的 id。您的 select 元素没有 value 属性。它们从用户选择的选项元素中获取值。我对你的 html 做了一些修改，我有一个 javascript 脚本，可以隐藏和显示丈夫和孩子的 div。

<div class="modal-body row">
    <form role="form" action="patient/addNew" class="clearfix" method="post" enctype="multipart/form-data">
        <div class="form-group col-md-6">
            <label for="exampleInputEmail1">

            </label>
            <select class="form-control m-bot15" name="categorie" value='' id="category">
                <option value="F#"> Sélect a category </option>
                <option value="pregnant_wife"> pregnant_wife </option>
                <option value="Personnal"> Personnal</option>
                <option value="Other"> Other</option>
            </select>
        </div>
        <div class="form-group col-md-6">
            <label for="exampleInputEmail1">
                Name
            </label>
            <input type="text" class="form-control" name="name" value='' placeholder="">
        </div>

        <div class="form-group col-md-6">
            <label for="exampleInputEmail1">
                Email
            </label>
            <input type="text" class="form-control" name="email" value='' placeholder="">
        </div>
        <div class="form-group col-md-6" id="divUsband" style="display:none">
            <label for="exampleInputEmail1">
                Husband Name
            </label>
            <input type="text" class="form-control" name="name_husband" id="nameUs" placeholder="">
        </div>
        <div class="form-group col-md-6" id="divEnfants" style="display:none">
            <label for="exampleInputEmail1">
                Pregnancies
            </label>
            <input type="number" class="form-control" name="number_pregnancy" id="numberPregnancy" placeholder="">
        </div>

        <div class="form-group col-md-6">
            <label for="exampleInputEmail1">
                Password
            </label>
            <input type="password" class="form-control" name="password" placeholder="">
        </div>
        <div class="form-group col-md-6">
            <label for="exampleInputEmail1">
                Address
            </label>
            <input type="text" class="form-control" name="address" value='' placeholder="">
        </div>
        <div class="form-group col-md-6">
            <label for="exampleInputEmail1">
                Medical History
            </label>
            <input type="text" class="form-control" name="andtecedentMed" value='' placeholder="">
        </div>
        <div class="form-group col-md-6">
            <label for="exampleInputEmail1">
                Family History
            </label>
            <input type="text" class="form-control" name="andtecedentFam" value='' placeholder="">
        </div>
        <div class="form-group col-md-6">
            <label for="exampleInputEmail1">
                Height
            </label>
            <input type="text" class="form-control" name="taille" value='' placeholder="">
        </div>
        <div class="form-group col-md-6">
            <label for="exampleInputEmail1">
                Weight
            </label>
            <input type="text" class="form-control" name="poids" value='' placeholder="">
        </div>
        <div class="form-group col-md-6">
            <label for="exampleInputEmail1">
                Phone
            </label>
            <input type="text" class="form-control" name="phone" value='' placeholder="">
        </div>
        <div class="form-group col-md-6">
            <label for="exampleInputEmail1">
                Sex
            </label>
            <select class="form-control m-bot15" name="sex" value=''>
                <option value="Masculin"> Masculin </option>
                <option value="Féminin"> Féminin </option>
                <option value="Autres"> Autres </option>
            </select>
        </div>
        <div class="form-group col-md-6">
            <label>
                Date of Birth
            </label>
            <input class="form-control form-control-inline input-medium default-date-picker" type="text"
                name="birthdate" value="" placeholder="" readonly="">
        </div>
        <div class="form-group col-md-6">
            <label for="exampleInputEmail1">
                Blood Type
            </label>
            <select class="form-control m-bot15" name="bloodgroup" value=''>
                <option value="A">A</option>
                <option value="AB">AB</option>
                <option value="AB-">AB-</option>
                <option value="O">O</option>
            </select>
        </div>
        <div class="form-group col-md-6">
            <label for="exampleInputEmail1">
                Doctor
            </label>
            <select class="form-control js-example-basic-single" name="doctor" value=''>
                <option value="">-- Select a Doctor --</option>

            </select>
        </div>
        <div class="form-group last col-md-6">
            <label class="control-label">Charger image</label>
            <div class="">
                <div class="fileupload fileupload-new" data-provides="fileupload">
                    <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                        <img src="//www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
                    </div>
                    <div class="fileupload-preview fileupload-exists thumbnail"
                        style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                    <div>
                        <span class="btn btn-white btn-file">
                            <span class="fileupload-new"><i class="fa fa-paper-clip"></i> Selectionner image</span>
                            <span class="fileupload-exists"><i class="fa fa-undo"></i> Changer</span>
                            <input type="file" class="default" name="img_url" />
                        </span>
                        <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i
                                class="fa fa-trash"></i> Enlever</a>
                    </div>
                </div>

            </div>
        </div>
        <section class="col-md-12">
            <button type="submit" name="submit" class="btn btn-info pull-right">
                Submit
            </button>
        </section>
    </form>

</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>

这里是根据用户选择来处理显示和隐藏 div 的 javascript。

const category = document.getElementById('category');
const husband = document.getElementById('divUsband');
const enfant = document.getElementById('divEnfants');

category.addEventListener('change', evt => {
    let result = evt.target.value;

    if (result === 'pregnant_wife') {
        husband.style.display = '';
        enfant.style.display = '';
    }
    else {
        husband.style.display = 'none';
        enfant.style.display = 'none';
    }
})