需要一個 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