从 HTML 选择中删除重复的选项答案

【问题标题】：remove duplicate options from HTML select从 HTML 选择中删除重复的选项
【发布时间】：2014-04-07 07:13:12
【问题描述】：

这很奇怪，但我们的开发人员不在，我的客户明天要进行网站演示。
在网页上，一个下拉菜单具有以下值。有没有办法使用脚本/css，我们的设计师可以隐藏复制的值，只显示 1-9 一次？非常感谢。

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>

【问题讨论】：

也许这将有助于禁用选择元素中的重复选项。stackoverflow.com/a/9369331/1940720
试试这个http://jsfiddle.net/Eg2Np/

标签： javascript jquery html css

【解决方案1】：

试试这个：

var usedNames = {};
$("select > option").each(function () {
  if(usedNames[this.text]) {
     $(this).remove();
 } else {
     usedNames[this.text] = this.value;
 }});

Working Demo

【讨论】：

【解决方案2】：

您可以使用 :gt() 选择器：

$('select option:gt(8)').hide();

【讨论】：

我怎样才能将它应用到页面上的这个特定下拉列表中
你可以给你的select一个id然后使用#来定位元素，比如：$('#selectId option:gt(8)').hide();
我认为它现在可以工作，但它的顺序相反，它不会工作，因为它8 是索引而不是实际值。选择匹配集中索引大于索引处的所有元素

【解决方案3】：

您可以使用 jQuery 删除 dups，如下所示：

var found = [];
$("select option").each(function() {
  if($.inArray(this.value, found) != -1) $(this).remove();
  found.push(this.value);
});

保留一个找到值的数组，如果数组中没有找到值，添加它.push()，如果找到，它是一个骗子，.remove()它。

【讨论】：

@down_voter，请注意评论。这是一个可行的解决方案。

【解决方案4】：

试试这个....

$('select option').each(function(i)){
    if(i >= 9)
    $(this).remove();
});

【讨论】：