Question

我在WordPress中使用jQuery AJAX加载两个下拉列表。我将AJAX数据作为字符串获取，而我只是将这些<option>添加到我的<select>字段中。它工作正常。但每次它都没有清除之前的追加。所以它实际上添加了重复选项。

所以我做了更改，我将empty()添加到<select>字段：

jQuery.ajax({
    type: 'POST',
    url: ajaxurl,
    data: {"action": "load_product",
            "company_id": company_id
          },
    success: function (data) {
        jQuery('#company-products').empty().append( data );
    }
});

但默认情况下，我在选择字段中有一个空值选项，它只是删除了那个。

<select name="product" id="company-products" class="form-control" required>
    <option value=""><?php _e( 'Select a product', 'textdomain' ); ?></option>
</select>

如何附加其他选项，但即使空（value=""）也不是空的请注意，我知道我可以从jQuery传递空字段，但出于翻译目的，我无法从那里传递它。所以我想要一个使用jQuery的可靠解决方案，而第一个选项仍然存在。

我甚至尝试将其更改为：

jQuery('#company-products').not(':first-child').empty();
jQuery('#company-products').append( data );

它没有工作，甚至没有附加任何东西。：（

Answer 1

尝试使用nextAll() - 删除空<option>

后的所有元素

var emptyOp = $('#company-products :first-child');

emptyOp.nextAll().remove();
emptyOp.after(data);

<强> Sample Demo

您可以使用许多其他选择器，

$('#company-products :gt(0)').remove();
$('#company-products').append(data);

OR

$('#company-products :not(:first-child)').remove();
$('#company-products').append(data);

Answer 2

不要使用empty()，只需使用remove()。

$('#company-products').children('option:not(:first)').remove();

希望这对您有用

Answer 3

如果你只是试着写

怎么办？

<?php _e( 'Select a product', 'textdomain' ); ?>

JS变量并在您从jQuery编写时传递给您选项？

var selectOption = '<?php _e( 'Select a product', 'textdomain' ); ?>';

jQuery为空选择但不是第一个选项

3 个答案: