javascript - 如何在 Javascript 中删除多个选择选项列表中的重复值

Question

我在多个选择选项列表中收到重复值，并且这些值是从 PHP 中的数据库动态获取的。现在我想从我的多选选项列表中删除这些重复值。我如何实现这个Javascript或Jquery？下面是我的代码。

HTML

<select name="countries[]" id="update_supp_last_countries" style="width:305px;" multiple="multiple" required>



<?php 
        foreach($supp_last_count_Row as $results5){
        $supp_last_country5[$i5] = $results5['countries'];
        $i5++;
         ?>

<option value='<?php echo $supp_last_country5[$itr5];?>' selected> <?php echo $supp_last_country5[$itr5];?> </option>
<?php $itr5++; } ?>

<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antartica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>

Javascript

var optionValues = [];
$('#update_supp_last_countries option').each(function() {
optionValues.push($(this).val());
});
var size = optionValues.length;
alert(optionValues);

现在我在 optionValues 数组中获取重复的值。我怎样才能删除这个。提前致谢。

Answer 1

如果jQuery.unique()就好了做了这样的工作，但它做了一些不同的事情，不适合适应。

嗯，如果我们想要一个 jQuery 方法，我们就必须编写自己的插件。

jQuery.fn.uniqueAttrs = function(attr) {
    if(!attr) return this;
    var that = this;
    return this.filter(function (index, node) {
        return that.index(that.filter(function() {
            return this[attr] === node[attr];
        })) === index;
    });
};

这样调用:

var $ul = $('#update_supp_last_countries');
$ul.html($ul.find('option').uniqueAttrs('value'));

<强> DEMO

说明:

This answer提供了一个简洁的解决方案来过滤 js 数组中的重复值。为了使相同的方法适用于 jQuery 集合，并过滤匹配的属性(在本例中为“值”)，需要稍作调整。

这种方法的好处是:

• 它仅依赖于 jQuery，
• 选项元素不需要重建 - 返回包含过滤后的原始元素的集合，不对集合中的节点进行任何假设(除了给定属性存在之外)。因此该插件具有良好的可重用性。

如果有一个缺点的话，那就是过滤器内的过滤器对于性能来说并不是非常理想。当元素超过数百个时，该插件会明显变慢。在我的小型 1.6 GHz 机器(有性能问题)上，我得到了这些数据，是多次运行的平均值:

• 20 个选项:40 毫秒
• 50 个选项:50 毫秒
• 100 个选项:75 毫秒
• 200 个选项:300 毫秒
• 400 个选项:600 毫秒

另外由于某种原因我不明白，如果重复应用 $ul.html($ul.find('option').uniqueAttrs('value')) ，则 selectedIndex 每次前进一个元素 - DEMO 。