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:
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); } } } } }); });
您可以執(zhí)行如下操作,禁用其他字段中選定的選項(xiàng)。這是它工作的屏幕錄制...
(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
Project 2
Project 3