Как найти и удалить дублируемую запись из выпадающего списка

Question

У меня есть раскрывающийся список с повторяющимися записями. Одним из дубликатов является выбранное значение в раскрывающемся списке. Например:

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

Теперь им пытаются убрать опцию New Zealand (дубликат), но в то же время, им пытаются сделать другую запись Новой Зеландии выбрали, так что я вижу список, как:

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

Любые идеи о том, как удалить дубликаты и сделать только из них выбранного?

Answer 1

Вам просто нужно сделать массив уникальных элементов, прежде чем ваш .each() , Это можно сделать разными способами. Вот one way, чтобы сделать это.

Answer 2

Вы можете попробовать так:

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

JSFIDDLE DEMO

или в Jquery так:

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

Answer 3

перед добавлением опции element.check, если есть еще один элемент с тем же значением, если так проверьте его и перейдите к следующей опции.

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