Benötigen Sie ein JQuery-Skript, um ausgewählte Optionen basierend auf der aktuellen Auswahl des Endbenutzers aus einem Auswahlfeld zu verschieben

Question

Ich habe eine HTML-Seite, auf der der Endbenutzer unsere Artikel über ein Auswahlfeldelement bewerten kann.

Sehen Sie sich die Geige für eine einfache Demo an:

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

Ich möchte ein JQuery-Skript erstellen, das die ausgewählte Option ändert, wenn dieselbe Rangfolge ein zweites Mal ausgewählt wird (wenn der Endbenutzer seine Meinung ändert usw.). Also:

• Angenommen, Element 1 ist als Nummer eins ausgewählt. Wenn der Endbenutzer dann zu Element 2 kommt und beschließt, dieses Element als Nummer eins festzulegen, sollte er hier nur Option 1 auswählen und andere Elemente sollten sich dafür entscheiden, automatisch auf Ebene 2 festgelegt zu werden.

• Angenommen, Projekt 1 wird als Erster und Projekt 2 als Zweiter ausgewählt. Nehmen wir dann an, dass der Endbenutzer, wenn er Element 3 überprüft, beschließt, es auf Rang Nummer eins zu setzen. Sobald er dies tut, sollte Punkt 1 automatisch an zweiter Stelle und Punkt 2 automatisch an dritter Stelle stehen.

Ich habe eine Abfrage erstellt, die für diesen Zweck erfolgreich funktioniert, aber das Skript ist aufgrund der folgenden Bedingungen fehlerhaft:

• Angenommen, Projekt 1 wird als Zweitplatzierter ausgewählt, dann wird Projekt 2 als Erstplatzierter ausgewählt. Dies führt dazu, dass Artikel 1 automatisch an dritter Stelle steht, obwohl es eigentlich keinen zweitplatzierten Artikel gibt.

Wie kann ich das Problem beheben?

Außerdem würde ich gerne wissen, ob es einen besseren Weg als meinen gibt, denn wie ich das mache, wird immer komplizierter.

Jede Hilfe wäre sehr dankbar.

Mein bisheriges jQuery-Skript:

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

您可以执行如下操作，禁用其他字段中选定的选项。这是它工作的屏幕录制...

(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);

Project 1

   
  1
  2
  3



Project 2

   
  1
  2
  3



Project 3

   
  1
  2
  3