动态创建 select 并使用 asp.net 核心中的 jQuery 从数据库添加 select 选项

Question

我正在尝试使用 jQuery 动态创建 select。我能够使用所需的命名创建 select。但是当我尝试添加选项时，我使用 ajax 调用从数据库中获取这些选项。选项未显示。

下面是我的观点。

 <div class="form-group row" id="data-url-ingredient" data-request-url="@Url.Action("GetIngredientList", "Products")">
  <input name="index" id="index" type="hidden" value="0" />
   <div class="col-md-10">
     <table class="table table-borderless tblIngredient">
        <thead>
            <tr>
                <th>Ingredient</th>
                <th>Quantity</th>
                <th><button type='button' class='btn btn-air-info btn-sm add-row' style='border-radius:30px'>MORE</button></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

下面是我的 jquery 代码。

$(document).ready(function () {
$('.add-row').on('click', function () {
    var t = $('.tblIngredient');
    var index = $('#index').val();
    var link = $('#data-url-ingredient').data('request-url');
    var drop = "<select class='form-control txtingredient' name='ProductIngredentList['" + $("#index").val().trim() + "'].Id'></select>"
    t.append('<tr> <td>' +
        drop +
        "</td>" +
        "<td><input type='text' class='form-control txtquantity' name='ProductIngredentList['" + $("#index").val().trim() + "'].Quantity' /></td>'" +
        "<td><button type='button' class='btn btn-air-warning btn-sm' style = 'border-radius : 30px''>DELETE</button></td></tr>");
    $.ajax({
        type: "POST",
        url: '/Admin/Products/GetIngredientList',
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        success: function (data) {
            var items = "<option selected disabled>Select ingredient</option>";;
            $.each(data, function (i, ingredient) {
                items += "<option value='" + ingredient.value + "'>" + ingredient.text + "</option>";
            });
            $(drop).append(items);
        }
    });
    index = parseInt(index) + 1;
    $('#index').val(index);
    reindex();
});
function reindex() {
    $('.tblIngredient').each(function (index1, index2) {
        index1 = 0;
        index2 = 0;

        $(this).find(".txtingredient").each(function () {
            var prefixName = "ProductIngredentList[" + index1 + "].Id";
            this.name = this.name.replace(/ProductIngredentList\[\d+\].Id/, prefixName);
            index1++;
        });
        $(this).find(".txtquantity").each(function () {
            var prefixQuantity = "ProductIngredentList[" + index2 + "].Quantity";
            this.name = this.name.replace(/ProductIngredentList\[\d+\].Quantity/, prefixQuantity);
            index2++;
        });
    });
}
$(document).on('click', 'button.btn-air-warning', function () {
    $(this).closest('tr').remove();
    reindex();
    return false;
});

这是我得到的输出 select 已创建，但没有选项：

以下是选项值的控制器操作。

public async Task<IActionResult> GetIngredientList()
    {
        var ingredentList = await _context.TblIngredient.Where(s => s.Status == true).ToListAsync();
        return Json(new SelectList(ingredentList, "Id", "Name"));
    }

Answer 1

在 ajax 调用之前，您已经将 select-box 添加到 tblIngredient，这就是 $(drop).append(items); 不起作用的原因。相反，您可以使用 $(".tblIngredient tr:last").find('.txtingredient').html(items)，这将在 select 框中找到 tr，即 last（现在已添加），并使用 .html() 附加您的选项。

演示代码 :

$('.add-row').on('click', function() {
  var t = $('.tblIngredient');
  var drop = "<select class='form-control txtingredient' name='ProductIngredentList[1].Id'></select>"
  t.append('<tr> <td>' +
    drop +
    "</td>" +
    "<td><input type='text' class='form-control txtquantity' name='ProductIngredentList[1].Quantity' /></td>'" +
    "<td><button type='button' class='btn btn-air-warning btn-sm' style = 'border-radius : 30px''>DELETE</button></td></tr>");
  /* $.ajax({
       type: "POST",
       url: '/Admin/Products/GetIngredientList',
       contentType: 'application/json; charset=utf-8',
       dataType: "json",
       success: function (data) {
          ;;
           $.each(data, function (i, ingredient) {*/
  var items = "<option selected disabled>Select ingredient</option>"
  items += "<option value='ddd'>dddsd</option>";
  /*});*/
  //use this
  $(".tblIngredient tr:last").find('.txtingredient').html(items)

  /*}
    });*/
  //some other codes..
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='tblIngredient'>
</table>

<button class="add-row">Add row </button>

动态创建 select 并使用 asp.net 核心中的 jQuery 从数据库添加 select 选项

Create select dynamically and add select options from database using jQuery in asp.net core

jquery

asp.net-core

html-select