Javascript 如何从下拉列表中查找和删除重复条目

我有一个包含重复条目的下拉列表。其中一个重复条目是下拉列表中的选定值。例如：

<select id="country">
  <option value="NZ">New Zealand</option> //New Zealand is selected option
  <option value="USA">United States</option>
  <option value="Ind">India</option>
  <option value="NZ">New Zealand</option>
  <option value="SA">South Africa</option>
  <option value="UK">United Kingdom</option>
 <option value="JP">Japan</option>
</select>

现在，我试图删除“新西兰”选项“重复”，但同时，我试图选择“新西兰”的另一个条目，因此我看到的列表如下：

<select id="country">

  <option value="USA">United States</option>
  <option value="Ind">India</option>
  <option value="NZ" selected>New Zealand</option> //removing the duplicate selection.
  <option value="SA">South Africa</option>
  <option value="UK">United Kingdom</option>
 <option value="JP">Japan</option>
</select>

以下是用于填充下拉列表的JavaScript：

$.ajax('/url/allcountries', {
    method:'GET',
    success: function(items){               
        if(items){
          var items = items;
           $.each(items, function(i, item) {
             $("#country").append($('<option></option>').val(item.code).html(item.name));
            //Eg: where item.code = "USA" and item.name ="United States"

            if($("#country :selected").text() === item.code){
                $("#country :selected").html(item.name);
                //Edit as per suggested
                var x = {};
                $("select[id='country'] > option").each(function () {
                 if(x[this.text]) {
                    $(this).remove();
                 } else {
                  x[this.text] = this.value;
                }
            });
               //this gives me a duplicate entry at the top of the list.
             }
          });
      } //if condition ends
   }//success ends
});

关于如何删除重复项并仅选择其中一项，您有什么想法吗？

您可以这样尝试：

[].slice.call(country.options)
  .map(function(a){
    if(this[a.innerText]){ 
      country.removeChild(a); 
    } else { 
      this[a.innerText]=1; 
    } 
  },{});

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

或者在Jquery中，如下所示：

[].slice.call(country.options)
  .map(function(a){
    if(this[a.innerText]){ 
      country.removeChild(a); 
    } else { 
      this[a.innerText]=1; 
    } 
  },{});

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

---

您只需在$each之前创建一个唯一项目数组。这可以通过许多不同的方式实现。这就是要做的

编辑 11-24-2019 新西兰//选择新西兰选项

不，不是。标记不会在选项上显示选定的属性。它可能已被选中，因为它是列表中的第一个条目，并且未选择任何选项元素

也许你希望新西兰在印度之后出现。您可以按该顺序放置选项，将其标记为选中，并在列表中显示在“印度”之后的“选择”中，也可以不允许选择任何内容并在“印度”之后插入“新西兰”选项，但它不会仅显示在下拉列表中的“选择”中，第一个选项将显示在“选择”对话框中，但不是实际选择的

在大多数情况下，需要一个带有默认选择的特定排序顺序。最常见的备选方案是不选择任何内容，并在列表中添加禁用选项作为第一个条目，其中包含空文本或占位符，例如，请选择一个国家/地区。后者相当简单，但我认为用前者的行为最好地解决了最初的问题

因此，您需要一种方法来告诉$.each的回调函数在附加它们时要将哪个选项标记为选中。我最初的答案是处理问题根源的正确方法列表中的重复条目。如果它们从未添加，则无需清理它们。列出一个不同的国家列表，然后分别调用$

下面是我最喜欢的使数组与众不同的新方法：

arr=[…新Setarr]

所以，在2019年重写这个

// If you want to specify a default selection, modify `toOption` as such...
//const defaultSelection = 'NZ'; 
//const toOption = c => 
//    new Option(c.name, c.code, c.code === defaultSelection, c.code === selected);
const toOption = c => 
    new Option(c.name, c.code, false, c.code === selected);    

const country= document.querySelector('#country');

// If you wish to retain previously selected country...
//const idx = country.selectedIndex;
//const selected = idx > -1 ? country.options[idx].value : null;
const selected = 'NZ';

while (country.firstChild) country.firstChild.remove();

const resp = await fetch('/url/allcountries');

[...new Set((await resp.json()).items)]
    .map(toOption).forEach(country.appendChild);

我可能会使用两个注释掉的块。同时，它们将允许始终保留以前的选择，而在没有选择任何内容时，默认为您选择的内容

请注意附加到.json的.items。这些示例假设您的api响应类型为application/json，并且有一个数组，在根目录下直接显示：

{
    "items": [{
        "code": "USA",
        "name": "United States"
    }, {
        "code": "Ind",
        "name": "India"
    }, {
        "code": "NZ",
        "name": "New Zealand"
    }, {
        "code": "SA",
        "name": "South Africa"
    }, {
        "code": "UK",
        "name": "United Kingdom"
    }, {
        "code": "JP",
        "name": "Japan"
    }]
}

这还假设响应对象将具有作为数组的items属性，即使是空的{items:[]}。我认为这是一个安全的假设，因为这是一个非CORS请求，这意味着您很可能可以控制服务器，因此您可以确保返回的是一个空列表，而不是null、false等。否则，您将希望将响应JSON保存到一个变量中，并将if语句添加回

const resp = await fetch(...)
const json = await resp.json();

if (json && json.items /*&& json.items.length */) 
    json.items.map(...).forEach(...);

…与

最后，您可能有一个从服务器返回的选定选项

{
    "items": [{
        "code": "USA",
        "name": "United States",
        "isDefault": true                <---default
    }, {
        "code": "Ind",
        "name": "India"
    }, {
        "code": "NZ",
        "name": "New Zealand",
        "selected": true                 <---currently selected
    }, {
        "code": "SA",
        "name": "South Africa"
    }, {
        "code": "UK",
        "name": "United Kingdom"
    }, {
        "code": "JP",
        "name": "Japan"
    }]
}

你可能想考虑选择的多个项目：虚假的。默认情况下，与此条件匹配的最后一个项目将是最终选定的选项

我还添加了一个假设的isDefault。这将允许服务器设置默认选择

new Option(c.name, c.code, c.isDefault, c.selected)

由此产生的肉和土豆目前只能在铬合金[可能是Opera]中使用，没有polyfills/babel/等：

async function updateCountries() {
    const country= document.querySelector('#country');
    
    while (country.firstChild) country.firstChild.remove();

    const resp = await fetch('/url/allcountries');
    const json = await resp.json();

    [...new Set(json?.items)]             
        .map(c => new Option(c.name, c.code, c.isDefault, c.selected))
        .forEach(country.appendChild);
}

---

免责声明：在添加option元素之前，绝对没有在所有主要浏览器以及所有军士和下士浏览器中测试过此代码。检查是否有其他元素具有相同的值如果是，请检查它并移动到下一个选项

success: function(items){               
        if(items){
          var items = items;
           $.each(items, function(i, item) {
             if($('option[value='+item.code+']').length!==0){
             $('option[value='+item.code+']')[0].selected='true';
             return 0;
             }
             $("#country").append($('<option></option>').val(item.code).html(item.name));
            //Eg: where item.code = "USA" and item.name ="United States"

            if($("#country :selected").text() === item.code){
                $("#country :selected").html(item.name);
                //Edit as per suggested
                var x = {};
                $("select[id='country'] > option").each(function () {
                 if(x[this.text]) {
                    $(this).remove();
                 } else {
                  x[this.text] = this.value;
                }
            });
               //this gives me a duplicate entry at the top of the list.
             }
          });
      } //if condition ends
   }//success ends

---

没有帮助我…我尝试了你建议的方法，如上图所示…对我来说仍然是一样的..我把它放错了？@user1234他的回答是为了清理列表，在创建并附加到DOM后删除重复的选项。您可以在每次运行后，使用超时来运行它