如何在動態生成的行中填充兩個下拉列表

Question

編輯：我的問題是我無法在動態生成的新行中填充下拉列表。

$('#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>

我搜索了各種解決方案，但它們要么不起作用，要么給出不同的響應，例如下拉列表問題。

謝謝你。

Answer 1

您正在使用id selector #NewTitle_ID ，它將 select 第一個元素為id NewTitle_ID 。 由於您對所有動態創建的行都具有same的id ，因此它始終會將您的選項克隆為僅第一個。

要解決您的問題，您可以使用attribute selector []像$("[name = 'xyz']")將 select 所有元素name屬性等於xyz 。

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

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