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不是正确的工具那个工作，恕我直言，但我希望这能使您到位。

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

1 个答案: