时间戳

首页 > 解决方案 > 如何在动态生成的行中填充两个下拉列表

javascript - 如何在动态生成的行中填充两个下拉列表

问题描述

编辑：我的问题是我无法在动态生成的新行中填充下拉列表。

$('#Title_ID option').clone().appendTo('#NewTitle_ID');
$('#Stuff_ID option').clone().appendTo('#NewStuff_ID');

这些是克隆 ddl 的行

当用户单击“添加新行”按钮时，我正在尝试生成一个包含两个下拉列表的新行。问题是单击时，它会生成行并克隆第一个动态生成的行和每个新行的 ddl 上的选项，它们的 ddl 是空的，并且在第一个 ddl 中生成 在此处输入图像描述

风景 ：

<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="Account">
Account <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">

                                                                @Html.DropDownList("Account_ID", null, "", htmlAttributes: new { @class = "form-control", Name = "AccID", ID = "Account_ID", required = "required" })
</div>
                                                        </div>
                                                        @if (Model != null)
                                                        {
                                                            for (int i = 0; i < Model.mannings.Count; i++)
                                                            {
                                                                //ManningPlanItem


                                                                <div class="x_content">
                                                                    <!-- start accordion -->
                                                                    <div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
                                                                        <div class="panel">

                                                                            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                                                                <td class="panel-body">
                                                                                    <table id="TableToBeEdited" class="table table-bordered">
                                                                                        <thead>
                                                                                            <tr>
                                                                                                <th></th>
                                                                                                <th>Title</th>
                                                                                                <th>Type</th>
                                                                                                <th>Jan</th>
                                                                                                <th>Feb</th>
                                                                                                <th>March</th>
                                                                                                <th>Apr</th>
                                                                                                <th>May</th>
                                                                                                <th>June</th>
                                                                                                <th>July</th>
                                                                                                <th>Aug</th>
                                                                                                <th>Sep</th>
                                                                                                <th>Oct</th>
                                                                                                <th>Nov</th>
                                                                                                <th>Dec</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            <tr id="tablerow0">
                                                                                                <th scope="row">0</th>
                                                                                                <td>

                                                                                                    @Html.DropDownList("Title_ID", null, "", htmlAttributes: new { @class = "form-control", Name = "mannings[0].Title_ID", ID = "Title_ID" })

                                                                                                </td>
                                                                                                <td>

                                                                                                    @Html.DropDownList("Stuff_ID", null, "", htmlAttributes: new { @class = "form-control", Name = "mannings[0].Stuff_ID", ID = "Stuff_ID" })
                                                                                                </td>
                                                                                                <td>
                                                                                                    <input type="number" name="mannings[0].Jan" class="form-control" />
                                                                                                </td>
                                                                                                <td>
                                                                                                    <input type="number" name="mannings[0].Feb" class="form-control" />
                                                                                                </td>
                                                                                                <td>
                                                                                                    <input type="number" name="mannings[0].Mar" class="form-control" />
                                                                                                </td>
                                                                                                <td>
                                                                                                    <input type="number" name="mannings[0].Apr" class="form-control" />
                                                                                                </td>
                                                                                                <td>
                                                                                                    <input type="number" name="mannings[0].May" class="form-control" />
                                                                                                </td>
                                                                                                <td>
                                                                                                    <input type="number" name="mannings[0].Jun" class="form-control" />
                                                                                                </td>
                                                                                                <td>
                                                                                                    <input type="number" name="mannings[0].Jul" class="form-control" />
                                                                                                </td>
                                                                                                <td>
                                                                                                    <input type="number" name="mannings[0].Aug" class="form-control" />
                                                                                                </td>
                                                                                                <td>
                                                                                                    <input type="number" name="mannings[0].Sep" class="form-control" />
                                                                                                </td>
                                                                                                <td>
                                                                                                    <input type="number" name="mannings[0].Oct" class="form-control" />
                                                                                                </td>
                                                                                                <td>
                                                                                                    <input type="number" name="mannings[0].Nov" class="form-control" />
                                                                                                </td>
                                                                                                <td>
                                                                                                    <input type="number" name="mannings[0].Dec" class="form-control" />
                                                                                                </td>
                                                                                                <td>
                                                                                                    <button type="button" class="btn btn-primary" onclick="RemoveRow(0);">Delete</button>

                                                                                                </td>

                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                            </div>
                                                                        </div>

                                                                    </div>
                                                                </div>

                                                            }
                                                        }
<div class="form-group">
                                        <button type="button" class="btn btn-primary" id="AdditionButton">
                                            Add New Row
                                        </button>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-5 col-md-10 ">
                                            <input type="submit" value="Create" class="btn btn-primary js-create" />

                                        </div>
                                    </div>

我正在使用的 jquery：

<script>

    var counter = 1;
    $(function () {
        $('#AdditionButton').click(function () {

            $(

                ' <tr id="tablerow' + counter + '"> <th scope="row">' + counter + '</th><td><select id="NewTitle_ID" name ="mannings[' + counter + '].Title_ID" class="form-control"></select></td>'
                + '<td><select id="NewStuff_ID" name = "mannings[' + counter + '].Stuff_ID" class="form-control"></select></td>'
                + '<td><input type="number" name="mannings[' + counter + '].Jan" class="form-control" /></td>'
                + '<td><input type="number" name="mannings[' + counter + '].Feb" class="form-control" /></td>'
                + '<td><input type="number" name="mannings[' + counter + '].Mar" class="form-control" /></td>'
                + '<td><input type="number" name="mannings[' + counter + '].Apr" class="form-control" /></td>'
                + '<td><input type="number" name="mannings[' + counter + '].May" class="form-control" /></td>'
                + '<td><input type="number" name="mannings[' + counter + '].Jun" class="form-control" /></td>'
                + '<td><input type="number" name="mannings[' + counter + '].Jul" class="form-control" /></td>'
                + '<td><input type="number" name="mannings[' + counter + '].Aug" class="form-control" /></td>'
                + '<td><input type="number" name="mannings[' + counter + '].Sep" class="form-control" /></td>'
                + '<td><input type="number" name="mannings[' + counter + '].Oct" class="form-control" /></td>'
                + '<td><input type="number" name="mannings[' + counter + '].Nov" class="form-control" /></td>'
                + '<td><input type="number" name="mannings[' + counter + '].Dec" class="form-control" /></td>'
                +'</tr > ').appendTo('#TableToBeEdited');

            counter++;

            $('#Title_ID option').clone().appendTo('#NewTitle_ID');
            $('#Stuff_ID option').clone().appendTo('#NewStuff_ID');
           
            return false;

        });


    });

</script>

我搜索了各种解决方案，但它们要么不起作用，要么给出不同的响应，例如下拉列表问题。

谢谢你。

标签： javascriptjqueryasp.net-mvcentity-framework

解决方案

您正在使用which 将选择第一个元素。正如您对所有动态创建的行所拥有的那样，它总是会将您的选项克隆为仅第一个。id selector #NewTitle_IDid NewTitle_IDsame id

要解决您的问题，您可以使用attribute selector []like$("[name = 'xyz']")将选择name属性等于的所有元素xyz。

在您的罐子里，您可以将其用作'[name="mannings[' + counter + '].Stuff_ID"]'. 您的附加代码将如下所示。

$('#Title_ID option').clone().appendTo('[name="mannings[' + counter + '].Title_ID"]');
$('#Stuff_ID option').clone().appendTo('[name="mannings[' + counter + '].Stuff_ID"]');

推荐阅读