Comment exclure des éléments d'une liste déroulante basée sur une autre liste déroulante

Question

J'ai trois listes déroulantes identiques. Je veux sélectionner une valeur de drop1 et avoir cette valeur exclue de drop2. Alors les sélections dans drop3 devraient exclure 1 & 2. Des idées? En fonction de votre confort avec PHP ou AJAX, vous avez deux solutions:

<select name="drop1"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 
<select name="drop2"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 
<select name="drop3"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 

Answer 1

Si vous êtes plus à l'aise avec PHP, vous pourriez avoir un utilisateur de soumettre les données d'un formulaire de sélection, puis en utilisant des déclarations comme si

if $value != '1'{ 
echo '<option value="1">1</option>'; 
} 

et le faire pour chaque champ dans la deuxième forme; puis répliquer cela pour le troisième formulaire. La solution plus lisse utiliserait AJAX pour utiliser un écouteur pour voir quand un utilisateur clique sur un champ une valeur java est définie comme ce champ et en utilisant une méthode similaire "if then show" sur la variable java-script pour cacher les champs qui contiennent cette valeur dans les autres formulaires.

Aussi l'une des solutions les plus simples serait de permettre des sélections multiples (En supposant que vous êtes d'accord avec l'utilisation d'une forme & les valeurs entre les formulaires sont les mêmes que l'exemple que vous avez donné plus haut). :

<select id="my_num" name="my_num" size="5" multiple="multiple" > 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
</select> 

Answer 2

vous pouvez utiliser l'événement de changement et supprimer des éléments choisis dans le dom

$('select[name=drop1]').change(function() { 
    var drop2 = $('select[name=drop2]').empty().hide(); 
    var exclude = $(this).val(); 
    var size = $(this).children().length; 
    for (var i=0; i<size; ++i) { 
     if (i != exclude) { 
      drop2.append('<option value="' + i + '">' + i + '</option>'; 
     } 
    } 
}); 

si vous avez par exemple plus complexe et vous avez besoin valeur basée explude vous pouvez créer un clone.

var clone = $('select[name=drop2]').clone(); 
$('select[name=drop1]').change(function() { 
    var copy = clone.clone(); 
    copy.find('option[value=' + $(this).val() + ']').remove().end(); 
    $('select[name=drop2]').replaceWith(copy); 
});