在MVC中追加重复div时不会出现Dropdownlist

Question

我有一份配偶信息。当点击添加按钮时，我在第一个下面附加重复的div。但HomeDistrict的Dorpdownlist没有出现在append div中，尽管level和其他输入标记工作正常。我添加了我附加的div。一切正常，除了下拉列表。

<div class=" card-body">
 <button class="btn-success text-right addspousBtn"><i class="icon icon-plus-square"> </i>Add New Spous</button>
                        <div class="form-row mt-1 SpousDiv">
                            <div class="col-6">
                                <div class="form-group col-12 m-0">
                                    <label for="Username" class="col-form-label s-12"><i class="icon-user mr-2"></i>Name</label>
                                    <input placeholder="Enter Name" class="form-control r-0 light s-12 SpousName" type="text" required>
                                </div>
                                <div class="form-group col-12 m-0">
                                    <label for="District" class="col-form-label s-12"><i class="icon-address-card mr-2"></i>Home District</label>
                                    <select class="custom-select select2 select2-hidden-accessible HomeDistrict" required="" tabindex="-1" aria-hidden="true">
                                        <option value="">-Select Home District-</option>
                                        @foreach (var item in ViewBag.Districts)
                                        {
                                            <option value="@item.DistrictId">@item.DistrictName</option>
                                        }
                                    </select>

                                </div>
                               
                            </div>
                        </div>
</div>



<script>
 var $remove = $('<input type="button" value="Remove" class="remove btn btn-danger" />');

        $(".addspousBtn").click(function (e) {
            e.preventDefault();

            debugger;

            var html = '<hr/><div class="form-row mt-1 SpousDiv"> <div class="col-6"> <div class="form-group col-12 m-0"> <label for="Username" class="col-form-label s-12"><i class="icon-user mr-2"></i>Name</label> <input placeholder="Enter Name" class="form-control r-0 light s-12 SpousName" type="text" required> </div><div class="form-group col-12 m-0"> <label for="RoleId" class="col-form-label s-12"><i class="icon-address-card mr-2"></i>Home District</label><select class="custom-select select2 select2-hidden-accessible HomeDistrict" required="" tabindex="-1" aria-hidden="true"><option value="">-Select Home District-</option>@foreach (var item in ViewBag.Districts){<option value="@item.DistrictId">@item.DistrictName</option>}</select></div></div></div>';


            var $lastDiv = $(".card-body").find(".SpousDiv").last();
            $(html).insertAfter($lastDiv);

        })
</script>

和js代码追加新的div

Answer 1

您可以使用

@Html.DropDownList("Districts", null, "-Select Home District-", new {@class="custom-select select2 select2-hidden-accessible HomeDistrict" })

并且您必须添加$(".select2").select2();以单击新的附加元素的js

<div class=" card-body">
  <button class="btn-success text-right addspousBtn">
   <i class="icon icon-plus-square"> </i>
   Add New Spous
 </button>
  <div class="form-row mt-1 SpousDiv">
    <div class="col-6">
      <div class="form-group col-12 m-0">
        <label for="Username" class="col-form-label s-12">
          <i class="icon-user mr-2"></i>
          Name
        </label>
        <input placeholder="Enter Name" class="form-control r-0 light s-12 SpousName" type="text" required>
      </div>
      <div class="form-group col-12 m-0">
        <label for="District" class="col-form-label s-12">
          <i class="icon-address-card mr-2"></i>
          Home District
        </label>
        @Html.DropDownList("Districts", null, "-Select Home District-", new {@class="custom-select select2 select2-hidden-accessible HomeDistrict"
        })

      </div>

    </div>
  </div>
</div>

<script>
  var $remove = $('<input type="button" value="Remove" class="remove btn btn-danger" />');

  $(".addspousBtn").click(function(e) {
    e.preventDefault();

    debugger;

    var html = '<hr/><div class="form-row mt-1 SpousDiv"> <div class="col-6"> <div class="form-group col-12 m-0"> <label for="Username" class="col-form-label s-12"><i class="icon-user mr-2"></i>Name</label> <input placeholder="Enter Name" class="form-control r-0 light s-12 SpousName" type="text" required> </div><div class="form-group col-12 m-0"> <label for="RoleId" class="col-form-label s-12"><i class="icon-address-card mr-2"></i>Home District</label>@Html.DropDownList("Districts", null, "-Select Home District-", new {@class="custom-select select2 select2-hidden-accessible HomeDistrict" })</div></div></div>';


    var $lastDiv = $(".card-body").find(".SpousDiv").last();
    $(html).insertAfter($lastDiv);
    $(".select2").select2();
  })
</script>

Answer 2

这似乎是ViewBag.Districts的一个问题，将它强制转换为你传递给它的类型。

@{ 

    var dis = ViewBag.Districts as List<string>; // or what ever type

    // Also it can be this way... 
    // var dis = (List<string>)ViewBag.Districts;

}
@foreach (var item in dis)
{
    <option value="@item.DistrictId">@item.DistrictName</option>
}