Limitation de la gamme de listes déroulantes

J'ai deux listes déroulantes en HTML (simplifié) comme ceci:

<select name="from" id="abs-from-1"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select> <select name="to" id="abs-to-1"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select>

Je voudrais restreindre ces entrées de sorte que lorsqu'un utilisateur sélectionne "Trois" dans la première liste déroulante, les valeurs "One" et "Two" sont complètement supprimées (ou désactivées) dans la deuxième liste déroulante et vice versa : Lorsqu'un utilisateur sélectionne "Quatre" dans la deuxième liste déroulante, j'aimerais que "Five" soit supprimé de la première liste déroulante. (Un peu comme un curseur de gamme)

Je sais que cela devrait être possible avec un petit code jQuery mais quelqu'un pourrait-il expliquer comment?

Modifier:

Ajout d'un petit code jQuery avec lequel j'ai joué, je peux sélectionner la valeur actuelle et obtenir le prochain élément déroulant. Mais comment puis-je désactiver les valeurs du "To" qui sont plus petites que la valeur actuelle dans l'élément "De", et vice versa.

 $('[name="from"]').on("change", function() { var currentVal = $(this).attr('value'); var toElem = $(this).next('[name="to"]'); });

Je n'ai pas réussi à le faire avec un petit code. C'est ce que j'ai fait .

 var from = $('#abs-from-1'); var to = $('#abs-to-1'); from.change(function () { var selectedValue = parseInt($(this).val()); to.find('option').prop('disabled', false).filter(function () { return parseInt(this.value) < selectedValue; }).prop('disabled', true); }); to.change(function () { var selectedValue = parseInt($(this).val()); from.find('option').prop('disabled', false).filter(function () { return parseInt(this.value) > selectedValue; }).prop('disabled', true); });

Mise à jour: l' utilisation de l'index ordinal des balises d'option peut également être une option. Voici un autre violon .

 var from = $('#abs-from-1'); var to = $('#abs-to-1'); from.change(function () { var selectedIndex = this.selectedIndex; to.find('option').prop('disabled', false).filter(function (index) { return index < selectedIndex; }).prop('disabled', true); }); to.change(function () { var selectedIndex = this.selectedIndex; from.find('option').prop('disabled', false).filter(function (index) { return index > selectedIndex; }).prop('disabled', true); });

J'ai changé un peu le code suggéré par Raman Chodźka, donc il ne dépend plus de l'identité et je peux utiliser plusieurs de ces listes déroulantes sur une seule page.

C'est ce que j'ai fait (jsFiddle) :

 $('[name="from"],[name="to"]').change(function () { var e = $(this); var val = parseInt($(this).val()); e.siblings('[name="from"],[name="to"]').find('option').prop('disabled', false).filter(function () { return ((e.attr('name') == 'from') ? parseInt(this.value) < val : parseInt(this.value) > val); }).prop('disabled', true); });

Devinez que vous recherchez une liste de sélection dynamique: http://css-tricks.com/dynamic-dropdowns/

Vous devez ajouter un programme onChange (sur les navigateurs modernes fonctionne avec onClick sur les options également, mais je suggère encore sur le changement) l'événement sur vos choix qui appelle une fonction js qui fait quelque chose comme ce que les gars ont répondu ici: jQuery supprimer les options de sélectionner

Je suggère d'ajouter certains identifiants à sélectionner, pour ajouter un auditeur d'événement, vous pouvez faire quelque chose comme $('#idSelect1').change(function() {bla bla})

Ou vous pouvez ajouter un événement directement dans yout html.