Question

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

HTML

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

的Javascript

npm uninstall -g npmconf
npm install -g cordova

现在我在 optionValues 数组中获取重复值。我该如何删除它。提前谢谢。

Answer 1

如果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'));

<强> 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 。

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: