0
votes

Désactiver plusieurs options spécifiques dans Sélectionner des listes qui ont le même nom de classe

sur mon formulaire de création, j'ai 3 sélectionnées les listes qui ont toutes les mêmes valeurs. Cependant, la même option ne peut pas être sélectionnée pour plus d'une sélection. Donc, si je sélectionne l'option une dans la première sélection .. Ensuite, je ne devrais pas pouvoir sélectionner cette option dans les deux autres.

Je l'ai presque, mais je suis dans un problème où si je sélectionne un problème Option alors la désactivation fonctionne pour les deux autres, mais dès que je sélectionne une option pour le 2e SELECT, l'option que j'ai sélectionnée dans la première sélection devient active pour les options de la troisième sélection.

Voici ce que j'ai:

html xxx

jQuery < Pré> xxx

J'ai un jsfiddle pour montrer un exemple de travail .


2 commentaires

Vous souhaitez donc désactiver toute valeur déjà sélectionnée sur toutes les cases de sélection potentielles à l'exception de la zone Select qui contient cette valeur?


@Francisleigh correct. Si je choisis John Doe dans Sélectionnez une .. Ensuite, je ne devrais pas pouvoir sélectionner John Doe dans Sélectionnez deux ou trois et vice versa.


3 Réponses :


1
votes

Votre problème est la suivante:

    // Get value of Person Select on change
$(".person-select").change(function() {

    //Select all drop downs
    var all_selects = $(".person-select");
    $(".person-select option").prop("disabled", false); //Activate all, but we will redisable appropriate ones next.

    //Recurse. Look at each drop down, and then compare against all drop downs that exist.
    for(var x = 0; x < all_selects.length; x++) {

        //Get selected name from each drop down, and then compare it against all drop downs, so that we can disable an option with the same value in other dropdowns.
        var currentSelection = $(all_selects[x]).prop("id");
        for(var y = 0; y < all_selects.length; y++) {

           //Ignore self. We do not want to disable the option with the above currentSelection value within that dropwdown, as it will prevent form submission of the selected value.
           if(currentSelection == $(all_selects[y]).prop("id")) continue;

           //Now, disable duplicate options in OTHER drop downs.
           var selectedPerson = $(all_selects[x]).val();
           if (selectedPerson !== "") {

               $(all_selects[y]).find("option[value='" + selectedPerson + "']").attr("disabled","disabled");

           }

        }

    }

});


13 commentaires

D'accord, donc il pourrait y avoir un autre problème à ce sujet. La première option de sélection est requise et le formulaire ne se soumet pas car la valeur qu'ils sélectionnaient est désactivée.


J'ai compris. Modification de ma réponse. Devrait être une solution simple.


Vient de poster une question à ce sujet, si vous voulez y répondre. Stackoverflow.com/Questtions/55363482/...


Je suggérerais de supprimer une question supplémentaire à ce sujet. La plupart des modérateurs de Stackoverflow vont essayer de fermer cela quand même. Mais j'ai ajouté le correctif ci-dessus. Notez la déclaration «Continuer». Cela empêchera la liste déroulante qui a une valeur sélectionnée de la désactivation de cette option dans la même liste déroulante.


Je l'ai dans mon Jsfiddle . Il travaille partiellement. Même si les 2e et 3ème sélection sont requis, ils seront utilisés et doivent également être soumis avec le formulaire. En outre, si je choisis "John Doe" dans la première sélection, je peux toujours le sélectionner dans le 2e


Pour plus de clarté, si je choisis john doe dans la première sélection, alors john doe doit être désactivé uniquement dans les 2e et 3ème sélectionnements, et inversement. John Doe ne doit pas être désactivé dans le Select où il a été choisi.


Une simple erreur de ma part. Fixé. var coté_person = $ (all_selected [x]). Val (); doit être devrait être varié_person = $ (ceci) .val (); Je m'excuse comme je ne l'ai pas Vérifiez dans le violon la dernière fois. Edit: En réalité, cela est plus proche, mais pas parfait. Faire un autre correctif maintenant!


Nous y arrivons lol. Avec votre dernière modification, il est désactivé l'option dans la sélection originale, mais je sais pourquoi. Dans la dernière instruction si , nous désactivons l'option pour tous les sélectionnements avec le nom de la classe .person-sélectionnez . Est-il comme un sauf méthode? Comme ... désactiver l'option dans tous les éléments sélectionnés sauf celui où l'option a été choisie? Qu'en est-il de pas ()


Je l'ai eu cette fois. Nous devions recueillir. Pour chaque descente, itérale à travers tous (ignorer l'auto-auto) et désactiver l'option de correspondance. La méthode ci-dessus fonctionne exactement comme je m'attends. Je sélectionne Jane Doe dans Select n ° 1, elle est désactivée dans # 2 et n ° 3. Si je sélectionne une autre descente, la même chose est vraie dans les autres déchets. Personne ne devient désactivé dans leur propre déroulement. Et vous pouvez changer la même liste déroulante à une nouvelle personne et tout se comporte comme prévu.


Désolé, toujours désactivé à ma fin. Voici Jsfiddle


Désolé, je suis juste idiot. Je suis vraiment désolé pour la course. Copier le dessus une fois de plus. Fait une autre modification. Et il semble fonctionner maintenant. Je sais que j'ai dit que les 5 derniers fois. Donnez-lui un autre essai.


Hahaha pas de problème. J'ai le Jsfiddle avec ce que je pense être votre dernier édition. Il désactive l'option dans la liste déroulante originale mais ne la désactive pas dans les autres.


Laissez-nous Continuez cette discussion en chat .



0
votes

Essayez ceci pour votre jQuery: xxx


0 commentaires

0
votes

Ici, nous gardons ici une trace d'un tableau de valeurs actuellement choisi et référennent toutes les options à l'encontre de celle-ci et si la valeur de la correspondance des options est désactivée (nier l'option choisie par relative sélectionnée.)

p>

<select id="Person-One-Select" class="person-select">
  <option value="">-- Select Person One --</option>
  <option value="John Doe">John Doe</option>
  <option value="Jane Doe">Jane Doe</option>
  <option value="Babe Ruth">Babe Ruth</option>
  <option value="Ted Williams">Ted Williams</option>
  <option value="Pete Rose">Pete Rose</option>
</select>

<select id="Person-Two-Select" class="person-select">
  <option value="">-- Select Person Two --</option>
  <option value="John Doe">John Doe</option>
  <option value="Jane Doe">Jane Doe</option>
  <option value="Babe Ruth">Babe Ruth</option>
  <option value="Ted Williams">Ted Williams</option>
  <option value="Pete Rose">Pete Rose</option>
</select>

<select id="Person-Three-Select" class="person-select">
  <option value="">-- Select Person Three --</option>
  <option value="John Doe">John Doe</option>
  <option value="Jane Doe">Jane Doe</option>
  <option value="Babe Ruth">Babe Ruth</option>
  <option value="Ted Williams">Ted Williams</option>
  <option value="Pete Rose">Pete Rose</option>
</select>


0 commentaires