如何在 Javascript 中删除多选选项列表中的重复值 - How to remove duplicate values in multiple select option list in Javascript

我在多选选项列表中获取重复值，并且值动态来自 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>

爪哇语

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

现在我在选项值数组中获取重复的值。我怎样才能删除它。提前谢谢。

如果jQuery.unique（）做这种工作会很好，但它做了一些不同的事情，不适合适应。

Hmffff，如果我们想要一个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'));

演示

解释：

这个答案提供了一个简洁的解决方案来过滤掉 js 数组中的重复值。为了使相同的方法适用于jQuery集合，并过滤匹配的属性（在本例中为"值"），需要进行轻微的调整。

这种方法的好处是：

它只依赖于jQuery，
选项元素不需要重新生成 - 返回包含过滤原始元素的集合，不假设集合中的节点（除了给定属性存在）。因此，该插件具有良好的可重用性度量。

如果有缺点，那就是过滤器中的过滤器对性能不是很理想。该插件将明显变慢，包含数百个以上的元素。在我的小型 1.6 GHz 机器（有性能问题）上，我得到了这些数字，在几次运行中取平均值：

20 个选项：40 ms
个选项：50 ms
100 个选项：75 ms
200 个选项：300 ms
400 选项：600 ms

同样出于某种原因我不明白，如果反复应用$ul.html($ul.find('option').uniqueAttrs('value'))，那么selectedIndex每次都会前进一个元素 - DEMO。

我使用 http://phpjs.org 函数（array_unique()）从数组中删除重复，空，空或假值。

我所做的只是将所有国家/地区存储在一个数组中，清理数组中的重复或错误值，然后重新绘制它。

// array_unique compressed:
    function array_unique(d){var c="",b={},e="";var a=function(h,g){var f="";for(f in g){if(g.hasOwnProperty(f)){if((g[f]+"")===(h+"")){return f}}}return false};for(c in d){if(d.hasOwnProperty(c)){e=d[c];if(false===a(e,b)){b[c]=e}}}return b};
var optionValues = [];
$('#update_supp_last_countries option').each(function() {
  optionValues.push($(this).val());
  $(this).remove(); // remove the option element
});
var cleanedArray = array_unique(optionValues); // clean the array
// let's go to paint the new options
for(var i in cleanedArray) {
  var opt = $('<option/>')
                .attr('value', cleanedArray[i]) // note that the value is equal than the text
                .text(cleanedArray[i]);
  $('#update_supp_last_countries').append(opt);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="update_supp_last_countries">
  <option value="Afghanistan">Afghanistan</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
  <option value="Algeria">Algeria</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="Angola">Angola</option>
  <option value="Anguilla">Anguilla</option>
  <option value="Angola">Angola</option>
  <option value="Anguilla">Anguilla</option>
  <option value="Angola">Angola</option>
  <option value="Anguilla">Anguilla</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>
</select>