Perlukan skrip jquery untuk mengalihkan pilihan yang dipilih dari kotak pilihan berdasarkan pemilihan semasa pengguna akhir

Question

Saya mempunyai halaman HTML di mana pengguna akhir boleh meletakkan kedudukan item kami melalui elemen kotak pilihan.

Lihat biola untuk demo ringkas:

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

Saya ingin membina skrip jquery yang mengubah pilihan yang dipilih jika kedudukan yang sama dipilih untuk kali kedua (jika pengguna akhir mengubah fikiran mereka dsb.). Jadi:

• Katakan item 1 dipilih sebagai nombor satu, maka apabila pengguna akhir datang ke item 2 dan memutuskan untuk menetapkan item ini sebagai nombor satu, dia hanya perlu memilih pilihan 1 di sini dan item lain harus memilih untuk ditetapkan secara automatik sebagai Tahap 2.

• Andaikan projek 1 dipilih sebagai kedudukan pertama dan projek 2 dipilih sebagai kedudukan kedua. Kemudian, andaikan bahawa apabila pengguna akhir menyemak item 3, dia memutuskan untuk menetapkannya kepada kedudukan nombor satu. Sebaik sahaja dia melakukan ini, item 1 akan secara automatik berada pada kedudukan kedua dan item 2 akan secara automatik berada pada kedudukan ketiga.

Saya telah membina pertanyaan yang berfungsi dengan jayanya untuk tujuan ini, tetapi skrip rosak disebabkan oleh syarat berikut:

• Andaikan projek 1 dipilih sebagai kedudukan kedua, kemudian projek 2 dipilih sebagai kedudukan pertama. Ini menyebabkan item 1 berada di kedudukan ketiga secara automatik, apabila sebenarnya tiada item kedudukan kedua.

Bagaimana untuk membetulkannya?

Selain itu, adakah cara yang lebih baik daripada saya, saya ingin tahu kerana cara saya melakukannya semakin rumit.

Sebarang bantuan amat kami hargai.

Skrip jQuery saya setakat ini:

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

Anda boleh melumpuhkan pilihan yang dipilih dalam medan lain dengan melakukan perkara berikut. Berikut ialah rakaman skrin ia berfungsi...

(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