Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final

Question

J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boîte de sélection.

Voir le violon pour une démo simple :

https://jsfiddle.net/Balkanlii/ghecv1j8/1/

Je souhaite créer un script jquery qui modifie l'option sélectionnée si le même classement est sélectionné une seconde fois (si l'utilisateur final change d'avis, etc.). Alors :

• Supposons que l'élément 1 soit sélectionné comme numéro un, puis lorsque l'utilisateur final arrive à l'élément 2 et décide de définir cet élément comme numéro un, il ne doit choisir que l'option 1 ici et les autres éléments doivent choisir de se définir automatiquement comme niveau 2.

• Supposons que le projet 1 soit sélectionné comme premier et que le projet 2 soit sélectionné comme deuxième. Supposons ensuite que lorsque l’utilisateur final vérifie l’élément 3, il décide de le placer au premier rang. Une fois qu’il a fait cela, l’élément 1 devrait automatiquement se classer en deuxième position et l’élément 2 devrait automatiquement se classer en troisième.

J'ai construit une requête qui fonctionne avec succès à cet effet, mais le script est interrompu en raison des conditions suivantes :

• Supposons que le projet 1 soit sélectionné comme deuxième, puis que le projet 2 soit sélectionné comme premier. Cela fait que l'élément 1 est automatiquement classé troisième, alors qu'il n'y a en réalité aucun élément classé deuxième.

Comment y remédier ?

Aussi, existe-t-il un meilleur moyen que le mien, j'aimerais savoir car la façon dont je le fais devient de plus en plus compliquée.

Toute aide serait grandement appréciée.

Mon script jQuery jusqu'à présent :

var previousValue = 0;
$("select[class='myclass']").on('focusin', function(){
     previousValue = $(this).val();
});

$("select[class='myclass']").on('change', function (event) { 
    var prevValue = parseInt(previousValue);
    var selectedValue = parseInt($(this).val());
    var selectedId = $(this).attr('id');

    $('#' + selectedId + " option").removeAttr("selected");
    $('#' + selectedId + " option[value=\""+selectedValue+"\"]").attr('selected', true);

    $("select[class='myclass']").each(function (index, element) { 
           var eval = parseInt($('#' + element.id).val());
            if (prevValue !== 0 && selectedValue !== 0) {
                if (eval >= selectedValue && (eval < prevValue) && element.id !== selectedId) {
                       var b = eval + 1;
                        if (b <= 3)
                            $('#' + element.id).prop('selectedIndex', b);
                        $('#' + element.id + " option").removeAttr("selected");
                        $('#' + element.id + " option[value=\"" + b + "\"]").attr('selected', true);

                }
                else if (eval <= selectedValue && (eval > prevValue) && element.id !== selectedId) {
                       var b = eval - 1;
                       $('#' + element.id).prop('selectedIndex', b);
                       $('#' + element.id + " option").removeAttr("selected");
                       $('#' + element.id + " option[value=\"" + b + "\"]").attr('selected', true);
                            }
                }
                else if (prevValue == 0) {
                            if (selectedValue > 0) {
                                if (eval >= selectedValue && element.id !== selectedId) {
                                    var b = eval + 1;
                                    if (b <= 3) {
                                        $('#' + element.id).prop('selectedIndex', b);

                                        $('#' + element.id + " option").removeAttr("selected");
                                        $('#' + element.id + " option[value=\"" + b + "\"]").attr('selected', true);
                                    }
                                }
                            }
                }
        });
 });

Answer 1

Vous pouvez désactiver les options sélectionnées dans d'autres champs en procédant comme suit. Voici une capture d'écran de son fonctionnement...

(function($) {

  const $all = $('select.myclass');
  
  $all.on('change input', function() {

    $all.find('option[disabled]').prop('disabled', false);
    
    $all.each(function() {
      const $this = $(this);
      const value = $this.val();
      
      $all.not($this).find(`option[value="${value}"]`)
        .prop('selected', false)
        .prop('disabled', !!parseInt(value));
    });
  });

})(jQuery);

sssccc
Project 1

   
  1
  2
  3



Project 2

   
  1
  2
  3



Project 3

   
  1
  2
  3