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

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>

如何附加其他选项,但即使使用empty(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);

示例演示

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

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

要么

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