我有一個(gè) HTML 頁(yè)面,最終用戶可以透過(guò)選擇框元素來(lái)對(duì)我們的項(xiàng)目進(jìn)行排名。
請(qǐng)參考小提琴來(lái)觀看簡(jiǎn)單的示範(fàn):
https://jsfiddle.net/Balkanlii/ghecv1j8/1/
我想建立一個(gè)jquery腳本,在第二次選擇相同排名的情況下(如果最終用戶改變主意等),它會(huì)改變所選選項(xiàng)。所以:
假設(shè)項(xiàng)目1 被選為排名第一,那麼當(dāng)最終用戶來(lái)到項(xiàng)目2 並決定將此項(xiàng)目設(shè)置為第一時(shí),他應(yīng)該只選擇此處的選項(xiàng)1,而其他項(xiàng)目則應(yīng)選擇自動(dòng)設(shè)定為等級(jí)2。
假設(shè)項(xiàng)目 1 被選為排名第一,項(xiàng)目 2 被選為排名第二。然後,假設(shè)當(dāng)最終用戶檢查項(xiàng)目 3 時(shí),他決定將其設(shè)定為排名第一。一旦他這樣做了,項(xiàng)目 1 應(yīng)該會(huì)自動(dòng)排名第二,項(xiàng)目 2 應(yīng)該會(huì)自動(dòng)排名第三。
我已經(jīng)建立了一個(gè)可以成功用於此目的的查詢,但是腳本因以下條件而損壞:
如何修復(fù)它?
另外,有沒(méi)有比我的方法更好的方法,我想知道,因?yàn)槲沂侨绾巫龅降?,它變得越?lái)越複雜。
如有任何幫助,我們將不勝感激。
到目前為止我的 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í)行以下操作,並停用其他欄位中選定的選項(xiàng)。這是它工作的螢?zāi)讳浹u...
(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