Javascript Girl
  1. Javascript Girl
  3. Maintenir un ensemble de listes déroulantes sélectionnées en utilisant Javascript
Intereting Posts
L'événement onchange sur le type d'entrée = la plage ne déclenche pas dans Firefox lorsque vous traînez PHP Javascript? Faites quelque chose lorsque l'utilisateur ferme la page ou le navigateur Copier dans le presse-papiers – ne fonctionne pas dans FF, Chrome Quelle est une bonne mise en œuvre de jeux mathématiques en JavaScript? AngularJS Afficher typeahead sur le clic de bouton Désactiver le bouton après une fois, cliquez Comprendre comment fonctionne le modèle JS HTML / JS: Confuse sur la méthode pour créer un bouton d'image Appliquer dynamiquement une classe active à nav li Traduire la touche JavascriptCode dans charCode pour la disposition du clavier non-US (c.-à-azerty) Empêchez BACKSPACE de revenir en arrière avec jQuery (Like Google's Homepage) Service de chargement AngularJS, puis contrôleur d'appel et rendu Comment cacher javascript window.open barre d'adresse / barre de localisation? Pourquoi ce JavaScript (utilisant document.open et document.write) ne fonctionnera-t-il pas dans Internet Explorer ou Opera? Enregistrement vocal sur iPhone en utilisant Safari et HTML5

Maintenir un ensemble de listes déroulantes sélectionnées en utilisant Javascript

J'ai un ensemble de listes déroulantes (8 en tout). Tous les déroulants ont le même ensemble d'options déroulantes disponibles. Cependant, l'exigence de l'entreprise est de s'assurer que l'utilisateur ne peut pas sélectionner la même option plus d'une fois.

En ce qui concerne le problème, il semble d'abord simple, mais il devient rapidement beaucoup de code. Cependant, cela semble être un problème relativement courant. Est-ce que quelqu'un connaît une solution, avez des conseils sur la façon de procéder sans écrire de resmes de Javascript. Une sorte de plugin réutilisable jquery pourrait être pratique pour cela aussi. Est-ce qu'il existe?

Un problème est que lorsqu'un élément sélectionné est choisi, il devient indisponible pour les autres listes de sélection. L'élément est supprimé des autres menus déroulants sélectionnés. Lorsqu'il devient disponible à nouveau (un menu déroulant change), il doit être inséré au point correct de la liste (les options déroulantes ont une commande). C'est le bit où ma solution a commencé à devenir assez complexe.

Personnellement, la façon dont je l'implémentei est d'avoir un menu déroulant «maître» contenant toutes les options possibles, simplement dans le but de mettre en cache. Ces options sont ensuite reproduites dans chacune des listes déroulantes "esclaves". Chaque fois que le menu déroulant d'un esclave est modifié, ils sont tous ré-peuplés à nouveau pour s'assurer qu'aucune liste déroulante ne peut partager la même valeur sélectionnée.

Aux fins de la démonstration, je n'ai travaillé que sur 3 listes déroulantes dans le code ci-dessous, mais cela devrait être assez simple. Ajoutez simplement les menus déroulants de mode et assurez-vous qu'ils contiennent l'attribut class="slave" .

En outre, si vous voulez que l'une des options soit à l'abri de l'élimination, il est possible d'exister dans tous vos menus déroulants (par exemple, l'option par défaut dans le code ci-dessous), ajoutez simplement la class="immune" attribut class="immune" À l'étiquette d'option dans la liste déroulante principale. 

 <script type="text/javascript"> // document - on load $(document).ready(function() { // initially populate all the drop downs PopulateAllDropDowns(); // populate all drop downs on each subsequent change $('select.slave').change(function(){ PopulateAllDropDowns(); }); }); function PopulateAllDropDowns() { // populate all the slave drop downs $('select.slave').each(function(index){ PopulateDropDown($(this).attr('id')); }); } function PopulateDropDown(id) { // preserve the selected value var selectedValue = $('#'+id).val(); // clear current contents $('#'+id).html(''); // attempt to add each option from the master drop down $('select#ddlTemplate').children('option').each(function(index){ // scope-safe var var masterOptionValue = $(this).val(); // check if option is in use in another slave drop down, unless it's immune var optionInUse = false; if (!$(this).hasClass("immune")) { $('select.slave option:selected').each(function(index){ if (masterOptionValue == $(this).val() ) optionInUse = true; }); } // if it's not in use, add it to this slave drop down if (!optionInUse) { // create new option var newOption = $('<option></option>').val($(this).val()).html($(this).text()); // ensure selected value is preserved, if applicable if (selectedValue == $(this).val()) newOption.attr('selected', 'selected') // add the option $('#'+id).append(newOption); } }); } </script> 

 <form> <!-- master drop down --> <select id="ddlTemplate" class="master" style="display:none"> <option value="" class="immune">Select ...</option> <option value="a">Option A</option> <option value="b">Option B</option> <option value="c">Option C</option> <option value="d">Option D</option> <option value="e">Option E</option> </select> <!-- slave drop downs --> <select id="ddlOne" class="slave"></select> <select id="ddlTwo" class="slave"></select> <select id="ddlThree" class="slave"></select> </form>

J'espère que cela pourra aider.

La manière la plus simple de faire ce que vous voulez est de lier une fonction dans la liste déroulante sélectionnée de la liste déroulante qui filtre le contenu de tous les autres menus déroulants et supprime ou désactive les options avec la valeur déjà sélectionnée.

Pour conserver l'ordre de votre liste, mettez en cache la liste des options dans le tableau, puis vous pouvez supprimer et ajouter la bonne position, ou supprimer toutes les options et ré-ajouter les options possibles actuelles.

Si vous voulez re-sélectionner les options déjà choisies en cache, et vous ne perdez rien.