Выпадающий список не появляется при добавлении дубликата div в MVC - PullRequest
Новая
       23

Выпадающий список не появляется при добавлении дубликата div в MVC

0 голосов
/ 16 апреля 2019

У меня есть div информации о супруге.При нажатии на кнопку «Добавить» я добавляю дубликат div ниже первого.Но Dorpdownlist для HomeDistrict не отображается в добавленном 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

Ответы [ 2 ]

0 голосов
/ 17 апреля 2019

Вы можете использовать 

@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>
0 голосов
/ 17 апреля 2019

Кажется, это проблема с 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>
}
...