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

拜托，有人能帮忙吗？就像，我想根据用户输入显示一个div。如果用户选择1个孩子，我希望显示一个用于性别和年龄显示的表单，否则，如果数字增加到2，我希望分区中有两个。

这是我的密码：

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

---

求你了，我需要你的帮助。我正在使用html、js和php。目前，该代码只适用于一个选项，我希望它最多适用于7个子项。

booking.com不太可能以这种方式使用您的技术堆栈，但使用您拥有的工具，您可以编写一个函数，根据该输入的值来管理DOM。这里是一个基本的/psuedo代码概念，您将读取输入值（可能需要

parseInt

），并运行多次循环，将表单html附加到父/容器div

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

$（“#numberOfChildren”）.change（函数（）{
对于（var i=0；i<$（this）.val（）；i++）{
$（“#MyNewContainerDivforthesForms”）。追加（“”）
}
});

---

这只是解决问题的一种方法，但之后您将遇到更多问题，如如何管理表单、表单数据、隐藏/显示每个表单等。jQuery不是该项工作的合适工具，但我希望这能让您有所收获。

--。您需要编写代码并分享您遇到的问题。读这篇文章：“时髦的城市公寓”-这是给我的。@FunkFortyNiner谢谢。你的观点已经被注意到了。@jmargolisvt很抱歉我忘了包含代码谢谢，这很有帮助

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