Question

我试图创建一个包含无数可折叠组和内部组的表单。

我陷入了怎样的困境，因为每个输入/可折叠都需要有唯一的ID。

实际上，我有这段代码:(摘自here）

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<div class="panel-group" id="accordion1">

        <div class="panel panel-warning">

            <div class="panel-heading">
                <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
                        Collapsible Group #2 (With nested accordion inside)
                    </a></h4>
            </div>

            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">

                    <!-- Here we insert another nested accordion -->

                    <div class="panel-group" id="accordion2">

                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2"
                                                           href="#collapseInnerOne">
                                        Collapsible Inner Group Item #1
                                    </a></h4>
                            </div>
                            <div id="collapseInnerOne" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    First name:<br>
                                    <input class="form-control" type="text" name="firstname"><br>
                                    Last name:<br>
                                    <input class="form-control" type="text" name="lastname">
                                </div>
                            </div>
                        </div>

                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2"
                                                           href="#collapseInnerTwo">
                                        Collapsible Inner Group Item #2
                                    </a></h4>
                            </div>
                            <div id="collapseInnerTwo" class="panel-collapse collapse">
                                <div class="panel-body">
                                    First name:<br>
                                    <input class="form-control" type="text" name="firstname"><br>
                                    Last name:<br>
                                    <input class="form-control" type="text" name="lastname">
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Inner accordion ends here -->

                </div>

                <div class="panel-footer">
                    <button class="btn btn-primary"> Add dynamic inner group</button>
                </div>

            </div>
        </div>

        <br>
        <button class="btn btn-warning"> Add collapsible group</button>
    </div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

＆＃13;

基本上，当用户点击橙色按钮＆＃34;添加可折叠组＆＃34;代码需要创建一个带有ID的新的可折叠组（以便稍后从输入表单获取）以及当用户点击蓝色按钮时＃34;添加动态内部组＆＃34;代码需要创建一个新的＆＃34;可折叠的内部组项目＆＃34;有自己的输入和ID。

我尝试了很多东西，我的实际代码是here（这里有很多不相关的代码）没有工作，我不知道该怎么做，我不知道＆＃39有经验的Jquery。

任何帮助或提示都将不胜感激，谢谢。

使用动态字段创建动态表单

0 个答案: