函数会创建selectpicker的其他错误项

Question

我写了一个函数来更新 Bootstrap selectpicker：

function LoadProductDetailings() {
    var productId = $(this).val();
    $('.product-detailing').find('option').remove();
    $.ajax({
        url: '@Url.Action("ProductDetailings", "Task")',
        data: 'ProductId=' + productId,
        success: function (response) {
            var detailings = JSON.parse(response);

            if (detailings != null) {

                for (var i = 0; i < detailings.length; ++i) {
                    var det = detailings[i];
                    $('.product-detailing').append('<option value="' + det.Id + '">' + det.Name + '</option>');
                }

                $('.product-detailing').selectpicker("refresh");
            }
        },
        error: function (response) {
            alert('@Errors.ActionFailed');
        },
        timeout: 15000
    });
}

但它会产生一个额外的项目：

如何解决？

Answer 1

您的选择器

$('.product-detailing').append('<option...>');

追加到具有类product-detailing的每个元素。你有一个<div>和一个<select>。

将选择器更改为

$('select.product-detailing').append('<option...>');

以便它只定位<select>元素。

Answer 2

在您的代码中，您可能需要将其循环比for循环所需的时间长一倍：

您可以尝试这样做：

 for (var i = 0; i < detailings.length - 1; ++i) {
     var det = detailings[i];
     $('.product-detailing').append('<option value="' + det.Id + '">' + det.Name + '</option>');
 }