【发布时间】：2020-07-07 20:23:53
【问题描述】：
编辑：我的问题是我无法在动态生成的新行中填充下拉列表。
$('#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>
我搜索了各种解决方案，但它们要么不起作用，要么给出不同的响应，例如下拉列表问题。
谢谢。
【问题讨论】：
-
你能在jsfiddle.net 中做一个你的代码的工作演示吗？我们可以看到问题所在。谢谢
-
@maverickosama92 这是一个 .net 视图语法。我将编辑帖子，以便让问题更清楚。
标签： javascript jquery asp.net-mvc entity-framework