需要一个 jquery 脚本，根据最终用户的当前选择从选择框中移动选定的选项

Question

我有一个 HTML 页面，最终用户可以通过选择框元素对我们的项目进行排名。

请参阅小提琴来观看简单的演示：

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

我想构建一个jquery脚本，在第二次选择相同排名的情况下（如果最终用户改变主意等），它会改变所选选项。所以：

• 假设项目 1 被选为排名第一，那么当最终用户来到项目 2 并决定将此项目设置为第一时，他应该只选择此处的选项 1，而其他项目则应选择自动设置为等级2。

• 假设项目 1 被选为排名第一，项目 2 被选为排名第二。然后，假设当最终用户检查项目 3 时，他决定将其设置为排名第一。一旦他这样做了，项目 1 应该自动排名第二，项目 2 应该自动排名第三。

我已经构建了一个可以成功用于此目的的查询，但是脚本因以下条件而损坏：

• 假设项目 1 被选为排名第二，则项目 2 被选为排名第一。这导致项目 1 自动排名第三，而实际上没有排名第二的项目。

如何修复它？

另外，有没有比我的方法更好的方法，我想知道，因为我是如何做到的，它变得越来越复杂。

如有任何帮助，我们将不胜感激。

到目前为止我的 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);
                                    }
                                }
                            }
                }
        });
 });

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

sssccc
Project 1

   
  1
  2
  3



Project 2

   
  1
  2
  3



Project 3

   
  1
  2
  3