Question

我有一个select下拉字段，它是从数据库动态创建的。由于这种创建方式，导致下拉菜单中包含重复的项目和值。

<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从菜单中删除重复项？

预先感谢

Abhinav

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>

Answer 2

另一种选择是使用此处建议的集合：alternatives或another alternative。

[ ...new Set([ ...<arg1>, ...<arg2> ]) ]例如

var y = [ ...new Set([ ...[1, 2, 3, 4, 5], ...[3, 4, 5] ]) ]

// expected output: [ 1, 2, 3, 4, 5 ]

使用输出绑定到下拉列表。

Answer 3

使用纯js进行双重for循环

使用选择删除方法

的简单方法

function clearList() {
  var x = document.getElementById("locationList");
  //count the lenth of select optons
  var listLength = x.length;
  for (var i = 0; i < listLength; i++) {
    for (var j = 0; j < listLength; j++) {
      //i != j This prevents the actual index from being deleted
      //x.options[i].value == x.options[j].value => it finds the duplicate index.
      if (x.options[i].value == x.options[j].value && i != j) {
        //Remove duplicate option element
        x.remove(j);
        //Refresh the list Length
        listLength--;
      }
    }
  }
}

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

<p>Click to remove duplicates</p>
<button onclick="clearList()">Remove</button>

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

3 个答案: