根据select选项jquery显示/隐藏多个div

Question

我有三个元素

当用户选择例如名为“一次”的第一个选项时，我需要同时显示第二个和第三个元素

这是HTML代码：

<div class="col-sm-6">
                                <p class="contact-form-typofservice">
                                    <label for="typeofservice" class="sr-only">Type of Service<span class="required">*</span></label>
                                    <select name="typeofservice" aria-required="true" id="typeofservice" class="form-control">
                                        <option value="" selected disabled hidden>Type Of Service</option>
                                        <option value="once">Once</option>
                                        <option value="daily">Dayly</option>
                                        <option value="weekly">Weekly</option>
                                        <option value="monthly">Monthly</option>
                                    </select>
                                </p>
                            </div>



                            <div class=" col-sm-6 day-tos" id="once" style="display:none;">
                                <p class="contact-form-once-day">
                                    <label for="typeofservice-onceday" class="sr-only">Visit Day<span class="required">*</span></label>
                                    <select name="visit day" aria-required="true" id="typeofservice-onceday" class="form-control">
                                        <option value="" selected disabled hidden>Visit Day</option>
                                        <option value="Monday">Monday</option>
                                        <option value="Tuesday">Tuesday</option>
                                        <option value="Wednesday">Wednesday</option>
                                        <option value="Thursday">Thursday</option>
                                        <option value="Friday">Friday</option>
                                        <option value="Saturday">Saturday</option>
                                    </select>
                                </p>
                            </div>


                            <div class=" col-sm-6 hour-tos" id="oncehours" style="display:none;">
                                <p class="contact-form-once-hours">
                                    <label for="typeofservice-oncehours" class="sr-only">From -> to<span class="required">*</span></label>
                                    <b>Time visit</b> <input id="once-hours" type="text" class="span2" value="" data-slider-min="8" data-slider-max="18" data-slider-step="1" data-slider-value="[10,15]"/> <b>Time End</b>
                                </p>
                            </div>

我需要Jquery代码

非常感谢

Answer 1

试试这个：

＆＃13;

＆＃13;

 $('#typeofservice').change(function () {
         
            if ($(this).val() == 'once')
                $('#oncehours').show();
            else
                $('#oncehours').hide();
            $('.day-tos').hide();
            $('#' + $(this).val()).show();
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
            <p class="contact-form-typofservice">
                <label for="typeofservice" class="sr-only">Type of Service<span class="required">*</span></label>

                <select name="typeofservice" aria-required="true" id="typeofservice" class="form-control">
                    <option value="" selected disabled hidden>Type Of Service</option>
                    <option value="once">Once</option>
                    <option value="daily">Dayly</option>
                    <option value="weekly">Weekly</option>
                    <option value="monthly">Monthly</option>
                </select>
            </p>
        </div>



        <div class="col-sm-6 day-tos" id="once" style="display:none;">
            <p class="contact-form-once-day">
                <label for="typeofservice-onceday" class="sr-only">Visit Day<span class="required">*</span></label>
                <select name="visit day" aria-required="true" id="typeofservice-onceday" class="form-control">
                    <option value="" selected disabled hidden>Visit Day</option>
                    <option value="Monday">Monday</option>
                    <option value="Tuesday">Tuesday</option>
                    <option value="Wednesday">Wednesday</option>
                    <option value="Thursday">Thursday</option>
                    <option value="Friday">Friday</option>
                    <option value="Saturday">Saturday</option>
                </select>
            </p>
        </div>


        <div class="col-sm-6 hours-tos" id="oncehours" style="display:none;">
            <p class="contact-form-once-hours">
                <label for="typeofservice-oncehours" class="sr-only">From -> to<span class="required">*</span></label>
                <b>Time visit</b> <input id="once-hours" type="text" class="span2" value="" data-slider-min="8" data-slider-max="18" data-slider-step="1" data-slider-value="[10,15]"/> <b>Time End</b>
            </p>
        </div>

＆＃13;

＆＃13;

＆＃13;