根据某些选择显示其他表单字段

Question

请问，有人可以帮忙吗？就像booking.com 一样，我想根据用户输入显示一个 div。如果用户选择 1 个孩子，我想为 性别和年龄显示 显示一个表单，否则，如果数字增加到 2，我希望 有两个 div。

这是我的代码：

<div class="modal-body">
                                    <div class="">
                                        <div class="row" id="form-messages">
                                            <div class="col-sm-12">
                                                <form id="reused_form">
                                                    <div class="form-group">
                                                        <input type="text" name="name" required class="form-control" placeholder="Enter Name">
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="email" name="email" required class="form-control" placeholder="Enter Email">
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="tel" name="phone number" required class="form-control" placeholder="Enter Phone Number">
                                                    </div>
                                                    <div class="form-group" id="numberOfChildren">
                                                            <select class="form-control" name="childrenage">
                                                                    <option>Number of Children</option>
                                                                    <option value="option1">1</option>
                                                                    <option value="option1">2</option>
                                                                </select>
                                                        </div>
                                                    <div class="form-row" id="childrenData" style="display:none;">
                                                        <div class="form-group" style="width:47%;margin-right:3px">
                                                            <select class="form-control" name="childrenage">
                                                                <option>Sex</option>
                                                                <option>Male</option>
                                                                <option>Female</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-group" style="width:47%; ">
                                                            <select class="form-control" name="childrenage">
                                                                <option>Children Age</option>
                                                                <option>1 Month</option>
                                                                <option>2 Month</option>
                                                                <option>3 Month</option>
                                                                <option>4 Month</option>
                                                                <option>5 Month</option>
                                                                <option>6 Month</option>
                                                                <option>7 Month</option>
                                                                <option>8 Month</option>
                                                                <option>9 Month</option>
                                                                <option>10 Month</option>
                                                                <option>11 Month</option>
                                                                <option>1 Year</option>
                                                                <option>2 Years</option>
                                                                <option>3 Years</option>
                                                                <option>4 Years</option>
                                                                <option>5 Years</option>
                                                                <option>6 Years</option>
                                                                <option>7 Years</option>
                                                                <option>8 Years</option>
                                                                <option>9 Years</option>
                                                                <option>10 Years</option>
                                                                <option>11 Years</option>
                                                                <option>12 Years</option>
                                                                <option>13 Years</option>
                                                                <option>14 Years</option>
                                                                <option>15 Years</option>
                                                                <option>16 Years</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <button class="btn btn-raised btn-warning" type="submit" style="width:50%">View Lookbook</button>
                                                        <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">Close</button>
                                                    </div>
                                                </form>
                                                <div id="error_message" style="width:100%; height:100%; display:none; ">
                                                    <h4>Error</h4>Sorry there was an error sending your form. 
                                                </div>
                                                <div id="success_message" style="width:100%; height:100%; display:none; ">
                                                    <h5>Your Message was Sent Successfully. <span><a href="./lookbook/" style="text-decoration: none; margin-left: 10px;" class="blink_me">Click here to view</a></span></h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

...这里是随附的 Javascript：

$(document).ready(function (){
            $("#numberOfChildren").change(function() {
                // foo is the id of the other select box 
                if ($(this).val() != "option1") {
                    $("#childrenData").show();
                }else{
                    $("#childrenData").hide();
                } 
            });
        });

拜托，我需要你的帮助。我正在使用 html、js 和 php。目前，该代码仅适用于一种选择，我希望它最多适用于 7 个孩子。

Answer 1

booking.com 不太可能采用这种方式并使用您的技术堆栈，但是使用您拥有的工具，您可以编写一个函数来根据输入的值来管理您的 DOM。这是一个基本/伪代码的想法，您将在其中读取输入值（可能需要parseInt）并多次运行循环，将您的表单html附加到父/容器div。

        $("#numberOfChildren").change(function() {
            for (var i = 0; i < $(this).val(); i++) {
                $("#myNewContainerDivForTheseForms").append("<div><someForm></div>")
            }
        });

这只是解决问题的一种方法，但之后你会遇到更多问题，比如你将如何管理表单、它们的数据、隐藏/显示每一个等等。jQuery 不是正确的工具那份工作恕我直言，但我希望这能让你有所收获。