javascript - 函数创建了 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>与那个类(class)。

将选择器更改为

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

这样它只针对 <select>元素。