2015-04-05 77 views
2

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

所以我做了一个变化,我添加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); 

它不工作,甚至没有任何附加。 :(

+0

使用[GT](http://api.jquery.com/gt-selector/)选择。 – 2015-04-05 12:51:44

回答

4

尝试使用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); 
0

如果你只是尝试写

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

JS变量,并通过你的选择,因为你写的,从jQuery的

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

好的尝试!但它显示了一切,但以某种方式不显示文本:http://prntscr.com/6ptvtb – 2015-04-05 12:54:33

+0

哟需要在你的JS代码之前写在你的PHP代码。 – 2015-04-05 13:14:02

1

不要使用empty()只是使用remove()

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

希望这能对你的作品

相关问题