Discussion :

[beegees]

Salut tout le monde,

J'ai une première liste déroulante :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="form-group col-md-6" id="herb_div">
							<label class="form-check-label"><strong><h5>Plante *</h5></strong></label>
							<select name="herb[]" id="herb" class="form-control">
							</select>
                        </div>

Cette liste déroulante est alimentée par les valeur d'une table de ma base de données.

Je donne la possibilité à mes visiteurs de cloner cette liste déroulante avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#herb_div").clone().attr({'id': 'herb_div' + cpt}).appendTo('#countHerb') .after(selct); // Add field html

J'ai du code js qui permet lorsque je sélectionne ma première liste déroulante de désactiver les valeurs identiques dans les autres listes déroulantes clonées :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$('select').on('change', function() 
            {
                alert("change");
 
                // enable all options 
                $('option[disabled]').prop('disabled', false);
 
                $('select').each(function() 
                {
                    $('select').not(this).find('option[value="' + this.value + '"]').prop('disabled', true); 
                });

Cela fonctionne juste pour la première en fait, je dois dire que les autres ne sont pas dans le DOM lors du chargement de le page, elles sont clonées et appariassent quand je clic sur le bouton + :

Voici ce que ça donne, je choisis une valeur dans la première liste déroulante, la seconde m'empêche de choisir la même valeur :



Auriez-vous une idée comment je pourrais améliore mon code afin que ça fonctionne avec toutes les listes déroulantes, mêmes celles qui sont générées à la volée ?

Merci d'avance.

[Toufik83]

Bonjour,

Deux solutions possibles :

Soit utiliser le paramètre true de $.clone() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$("#herb_div").clone(true)....

Soit attacher l’événement "change" aux select par délégation :

C'est à dire au lieu de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('select').on('change', function() {....});

tu mets :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$('#countHerb').on('change', 'select',function(){....});

[beegees]

Bonjour Toufik,

Mille mercis pour ta réponse.

Mon code fonctionne parfaitement et le résultat attendu est le résultat obtenu.

Je suis vraiment satisfait.

Encore merci.