2010-07-12 26 views
6

¿Cómo I, usando jQuery, retire los DUPEliminar las entradas duplicadas de una caja de selección

 <option value="English">English</option> 
     <option value="English">English</option> 
     <option value="English">English</option> 
     <option value="Geology">Geology</option> 
     <option value="Geology">Geology</option> 
     <option value="Information Technology">Information Technology</option> 
     <option value="Music">Music</option> 
     <option value="Music">Music</option> 
     <option value="Zoology">Zoology</option> 

Respuesta

11

Puede hacerlo de esta manera:

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

Give it a try here, es un enfoque simple, estamos solo estamos manteniendo una matriz de valores encontrados, si no hemos encontrado el valor, agrégalo a la matriz (.push()), si tiene encontrado el valor, este es un engaño que encontramos anteriormente, .remove().

Esto solo rastrea el <select> una vez, minimizando el recorrido DOM que es un lote más costoso que las operaciones de la matriz. También estamos usando $.inArray() en lugar de .indexOf() para que esto funcione correctamente en IE.


Si desea una solución menos eficiente pero más corta (sólo para ilustración, utilice el primer método!):

$('select option').each(function() { 
    $(this).prevAll('option[value="' + this.value + '"]').remove(); 
}); 

You can test it here, esto elimina todos los hermanos con el mismo valor, pero es mucho más es caro que el primer método (DOM Traversal es costoso, y el motor de selector múltiple llama aquí, muchos más). Estamos usando .prevAll() porque no puede simplemente eliminar .siblings() dentro de un .each(), causará algunos errores con el ciclo ya que esperaba el próximo hijo.

+0

Comentario para ayudar a los novatos como yo. Si usa jQuery noconflict, asegúrese de reemplazar todos los $ con lo que elija. Le ahorrará mucho tiempo depurando. :) - http://api.jquery.com/jquery.noconflict/ –

+1

@JoshuaDance también puedes envolver todo esto en una función donde '$' está jQuery dentro para simplificar cosas, como esta: '(función ($) {... code ...}) (jQuery); '(o algo más si no es' jQuery'). Esto significa que lo que elija va 1 lugar, en lugar de tener que modificar cada bit de código o complemento que desea utilizar. –

+0

Este método detendrá los duplicados en ** ALL ** selecciona en la página. Por ejemplo, si tiene múltiples selecciones de sí/no, solo la primera tendrá opciones. Duplique la selección en su violín y pruebe. Por lo tanto, ninguna opción aparecerá en la página más de una vez. hth –

2

La forma más fácil que me vino a la mente estaba usando hermanos

$("select>option").each(function(){ 

var $option = $(this); 

$option.siblings() 
     .filter(function(){ return $(this).val() == $option.val() }) 
     .remove() 


}) 
1

Desde la parte superior de mi cabeza, no probados:

$('#mySelect option').each(function(){ 
    if ($('#mySelect option[value="'+$(this).val()+'"]').length) $(this).remove(); 
}); 
+0

Es una buena manera, pero en su pregunta agregue "... longitud> 1" –

0

uso Try a continuación código para eliminar duplicados opciones:

$("#color option").val(function(idx, val) { 
 
    $(this).siblings("[value='"+ val +"']").remove(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select class ="select-form" name="color" id="color"> 
 
    <option value="">Select Color</option> 
 
    <option value="1">Color 1</option> 
 
    <option value="2">Color 2</option> 
 
    <option value="3">Color 3</option> 
 
    <option value="3">Color 3</option> <!-- will be removed since value is duplicate --> 
 
    <option value="2">Color 2</option> <!-- will be removed since value is duplicate --> 
 
</select>

Cuestiones relacionadas