我有一个 HTML 页面,最终用户可以通过选择框元素对我们的项目进行排名。
请参阅小提琴来观看简单的演示:
https://jsfiddle.net/Balkanlii/ghecv1j8/1/
我想构建一个jquery脚本,在第二次选择相同排名的情况下(如果最终用户改变主意等),它会改变所选选项。所以:
假设项目 1 被选为排名第一,那么当最终用户来到项目 2 并决定将此项目设置为第一时,他应该只选择此处的选项 1,而其他项目则应选择自动设置为等级2。
假设项目 1 被选为排名第一,项目 2 被选为排名第二。然后,假设当最终用户检查项目 3 时,他决定将其设置为排名第一。一旦他这样做了,项目 1 应该自动排名第二,项目 2 应该自动排名第三。
我已经构建了一个可以成功用于此目的的查询,但是脚本因以下条件而损坏:
如何修复它?
另外,有没有比我的方法更好的方法,我想知道,因为我是如何做到的,它变得越来越复杂。
如有任何帮助,我们将不胜感激。
到目前为止我的 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); } } } } }); });
您可以执行如下操作,禁用其他字段中选定的选项。这是它工作的屏幕录制...