我有一個 HTML 頁面,最終用戶可以通過選擇框元素對我們的項目進行排名。
請參閱小提琴來觀看簡單的演示:
https://jsfiddle.net/Balkanlii/ghecv1j8/1/
我想構(gòu)建一個jquery腳本,在第二次選擇相同排名的情況下(如果最終用戶改變主意等),它會改變所選選項。所以:
假設(shè)項目 1 被選為排名第一,那么當最終用戶來到項目 2 并決定將此項目設(shè)置為第一時,他應該只選擇此處的選項 1,而其他項目則應選擇自動設(shè)置為等級2。
假設(shè)項目 1 被選為排名第一,項目 2 被選為排名第二。然后,假設(shè)當最終用戶檢查項目 3 時,他決定將其設(shè)置為排名第一。一旦他這樣做了,項目 1 應該自動排名第二,項目 2 應該自動排名第三。
我已經(jīng)構(gòu)建了一個可以成功用于此目的的查詢,但是腳本因以下條件而損壞:
如何修復它?
另外,有沒有比我的方法更好的方法,我想知道,因為我是如何做到的,它變得越來越復雜。
如有任何幫助,我們將不勝感激。
到目前為止我的 jQuery 腳本:
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í)行如下操作,禁用其他字段中選定的選項。這是它工作的屏幕錄制...
(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
Project 2
Project 3