Comment supprimer des options de l'élément select en utilisant jquery?

Question

je n menus déroulants comme ceci:

<select id="select1"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 

<select id="select2"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
</select> 

avec des options identiques. Tous les choix doivent être uniques, donc une fois l'option sélectionnée dans une liste déroulante, elle doit être supprimée des autres. Donc, si un utilisateur sélectionne "1" dans select1, il n'y aura que les options "2" et "3" dans select2.

Maintenant, jQuery disable SELECT options based on Radio selected (Need support for all browsers) offre une bonne solution, mais comment puis-je modifier cela pour travailler avec des sélections au lieu de boutons radio?

Answer 1

Est-ce que c'est ce que vous voulez dire?

Cela supprimerait tout de #select2 qui était en #select1:

$("#select2 option").each(function() { 
    if($("#select1 option[value=" + this.value + "]").length) 
     $(this).remove(); 
}); 

Voici une autre alternative qui supprime tous les doublons:

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

Cela supprime tous les dupliquer, en laissant l'option il que dans le premier <select> il l'a trouvé dans.

Mise à jour pour votre commentaire:

$("#select1").change(function() { 
$("#select2 option[value=" + $(this).val()+ "]").remove(); 
}); 

Answer 2

Alternativement, si les sélections ont les mêmes options dans le même ordre.

$('select').change(function() { 
    var selectedIndex = $(this).find(':selected').index();  
    $('select').not(this).find('option:nth-child(' + selectedIndex + ')').remove(); 
)}; 

Je pense que cette méthode est plus rapide (mais moins facile à lire).