javascript - 仅通过 javascript 从下拉列表中删除重复项

Question

我有一个从数据库动态创建的选择下拉字段。由于创建方式的原因，它会导致下拉列表具有重复的项目和值。

<select id="locationList">
<option value="1">Andover</option>
<option value="2">Bishops waltham</option>
<option value="1">Andover</option>
<option value="3">Boscombe</option>
<option value="4">Bournemouth</option>
<option value="2">Bishops waltham</option>
<option value="4">Bournemouth</option>

</select>

有谁知道是否有一种方法可以在页面上使用某些代码来检查下拉列表中是否有重复项并仅通过 Javascript No Jquery 从菜单中删除重复项？

提前致谢，

阿比纳夫

Answer 1

Javascript 有 removeChild 选项，您可以使用它来删除重复值:

var fruits = document.getElementById("locationList");

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

<select id="locationList">
<option value="1">Andover</option>
<option value="2">Bishops waltham</option>
<option value="1">Andover</option>
<option value="3">Boscombe</option>
<option value="4">Bournemouth</option>
<option value="2">Bishops waltham</option>
<option value="4">Bournemouth</option>
</select>