克隆后下拉列表未显示所有项目

Question

我想克隆及其工作。但是下拉列表无法选择。 我不知道自己犯了什么错误。希望可以帮助我解决这个问题。谢谢。

显示表

<table class="table" id="ItemList" style="width:100%">
   <tr>
     <th class="col-md-2 col-sm-12 col-xs-12">Field</th>
     <th class="col-md-2 col-sm-12 col-xs-12">Cage</th>
     <th class="col-md-3 col-sm-3 col-xs-3">Tare Weight</th>
     <th class="col-md-3 col-sm-3 col-xs-3">Gross Weight</th>
     <th class="col-md-2"></th>
   </tr>
</table>

克隆表

<table class="table hide" id="ItemListClone" style="width:100%" >
   <tr>
     <th class="col-md-2 col-sm-12 col-xs-12">Field</th>
     <th class="col-md-2 col-sm-12 col-xs-12">Cage</th>
     <th class="col-md-3 col-sm-3 col-xs-3">Tare Weight</th>
     <th class="col-md-3 col-sm-3 col-xs-3">Gross Weight</th>
     <th class="col-md-2"></th>
   </tr>
   <!-- This is  clonable row line -->
   <tr class="item-cage-clone">
       <td>
         <select class="form-control select " name="FieldID" asp-items="@ViewBag.FieldList">
          <option value="">Choose..</option>
         </select>
       </td>
       <td>
        <select class="form-control select " name="CageID" asp-items="@ViewBag.CageList">
          <option value="">Choose..</option>
        </select>
       </td>
       <td>
         <label for="WeightContainer" name="WeightContainer"></label>
       </td>
       <td>
        <input type="number" name="WeightIn" class="form-control">
       </td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove cage-remove"></span>
        </td>
     </tr>
</table>

添加到表中的笼子

$('.cage-add').on('click', function (e) {

    var item = $("#ItemListClone").find(".item-cage-clone").clone(true);

    $("#ItemList").append(item);
})