Désactiver les options de la liste déroulante une fois qu'elles ont été choisies dans une autre liste déroulante

Question

J'ai 12 zones de saisie à menu déroulant, une pour chacun des mois de l'année. Chaque liste déroulante offre le choix entre les mêmes 24 options.

Je dois faire en sorte que, par exemple, si dans le menu déroulant de janvier vous choisissez l'option n° 4, cette option n° 4 ne puisse être sélectionnée dans aucun des autres menus déroulants. Elle serait toujours présente dans le menu déroulant, mais elle serait simplement désactivée.

Un déclencheur ajax vérifierait la valeur par rapport aux autres menus déroulants et modifierait dynamiquement les autres menus déroulants.

Y a-t-il une boucle que je puisse faire pour vérifier et désactiver ces valeurs dynamiquement sans avoir à faire beaucoup d'instructions if ?

Answer 1

Vous pouvez utiliser jQuery pour trouver l'adresse de l'utilisateur. option dans toutes les autres listes déroulantes (dans mon exemple, désigné par un certain class ...et peut facilement être changé en un autre sélecteur - je pensais que le sélecteur "select" était trop large), puis de désactiver l'application réelle de la option en utilisant .prop("disabled", true) . Mais c'est un peu plus compliqué que cela, car vous devez garder la trace de la valeur sélectionnée précédemment pour réactiver la liste déroulante lorsqu'une autre valeur est choisie. Voici un exemple qui, nous l'espérons, vous aidera :

http://jsfiddle.net/p5Arj/

$(document).ready(function () {
    $(".test").each(function () {
        var $self = $(this);
        $self.data("previous_value", $self.val());
    });

    $(".test").on("change", function () {
        var $self = $(this);
        var prev_value = $self.data("previous_value");
        var cur_value = $self.val();

        $(".test").not($self).find("option").filter(function () {
            return $(this).val() == prev_value;
        }).prop("disabled", false);

        if (cur_value != "") {
            $(".test").not($self).find("option").filter(function () {
                return $(this).val() == cur_value;
            }).prop("disabled", true);

            $self.data("previous_value", cur_value);
        }
    });
});

Cela désactive donc les mêmes options de toutes les autres listes déroulantes lorsque vous en choisissez une, et fait en sorte que lorsque vous en choisissez une autre, la précédente soit activée dans toutes les autres listes déroulantes. Par exemple, choisissez "3" dans la première liste déroulante... regardez la deuxième liste déroulante - voyez que "3" est désactivé... revenez à la première liste déroulante et choisissez "1"... regardez la deuxième liste déroulante - voyez que "3" est à nouveau activé mais que "1" est désactivé. C'est ce que l'utilisation de .data est pour dans mon code.

Bien sûr, vous pouvez remplacer l'utilisation de value con selectedIndex si vous êtes sûr à 100% que tous les options sera le même pour chaque select en question.

Answer 2

http://jsfiddle.net/Rk5e9/9/

Seulement une dizaine de lignes, et pas d'ajax !

<select class="unique-value">
    <option value="-1" selected="selected">Default</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="unique-value">
    <option value="-1" selected="selected">Default</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="unique-value">
    <option value="-1" selected="selected">Default</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

Script:
$(document).ready(function(){
    $('.unique-value').focus(function(){
        var val = $(this).val();
        $(this).attr('data-current-value', val); 
    });

    $('.unique-value').change(function(){
        var val = $(this).val();
        if(val != -1)
            $('.unique-value option[value=' + val + ']').attr('disabled', 'disabled'); 

        var oldval = $(this).attr('data-current-value');
        $('.unique-value option[value=' + oldval + ']').removeAttr('disabled'); 
    });        
});​

Answer 3

Je pense que ce serait la solution la plus courte :

<select class="select-value">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="select-value">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="select-value">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

et le code jquery :

    $(document).on('change', '.select-attendee', function(){
        $current=$(this);
        $(".select-attendee").not($current).children("option[value='"+$current.val()+"']").attr('disabled', "disabled");
    });

Answer 4

En supposant que vous ayez une liste déroulante pour chaque mois, et une option pour chaque semaine.

<select class="month" id="october">
  <option class="week" value="week1">Week One</option>
  <option class="week" value="week2">Week Two</option>
</select>

Disons que vous sélectionnez une semaine, et que vous écoutez l'événement.

$(".month").change(function(event) {
   // Get the week just selected.
   var selectedWeek = $(this).children(".week:selected").val();
   // Enabled all weeks before disabling the selected week.
   $("option.week").removeAttr("disabled");
   // Disable all week options matching this selection.
   $("option.week[value="+selectedWeek+"]").attr("disabled", "disabled");
});