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

Posted 2023-02-22

【中文标题】jQuery空选择但不是第一个选项

【英文标题】：jQuery empty select but not the first option

【发布时间】：2015-06-10 00:46:03

【问题描述】：

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

所以我做了一个更改，我在<select> 字段中添加了empty()：

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 );

它不起作用，甚至没有附加任何东西。 :(

【问题讨论】：

使用gt 选择器。

【参考方案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);

或

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

【参考方案2】：

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

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

希望这对你有用

【参考方案3】：

如果你只是尝试写作会怎样

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

JS 变量并在您编写时通过 jQuery 传递您的选项？

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

【讨论】：

不错的尝试！但它显示了一切，但不知何故没有显示文字：prntscr.com/6ptvtb

你需要在你的 JS 脚本之前写在你的 php 代码中。

实际上你不应该以这种方式将未转义的文本传递给 JS。在这种情况下，您应该使用esc_js()。但是WordPress推荐的传递翻译字符串的方式，动态数据是wp_localize_script()。