Jquery - beberapa daftar dropdown, nonaktifkan entri yang dipilih di daftar lain

Saya memiliki beberapa daftar tarik-turun, ketika saya memilih entri di salah satu entri, saya ingin entri tersebut dinonaktifkan di daftar lain sehingga tidak dapat dipilih.

Namun jika tidak dipilih, maka saya memerlukannya tersedia di daftar lainnya.

Sejauh ini saya punya:

$('#frm1').on('change', 'select[name="dropdown"]', function (event) {   

    $('.dropdown').not(this).find('option[value="' + dropdownval + '"]').attr('disabled','disabled');

});

Yang menonaktifkan entri yang dipilih di daftar lain, tetapi saya tidak dapat melihat cara mengembalikannya jika tidak dipilih.

Ini adalah biola yang menunjukkan apa yang saya dapatkan sejauh ini.

Ada ide, terima kasih


dropdown jquery select
person Tom    schedule 14.10.2019    source sumber
comment
Harap sertakan Anda html   -  person Carsten Løvbo Andersen    schedule 14.10.2019
comment
tautan ke biola ditambahkan ke pos asli.   -  person Tom    schedule 14.10.2019
comment
Jika pemilihan suatu opsi harus menghapus pengaruh yang dinonaktifkan sebelumnya, maka tambahkan perintah untuk memilih semua opsi dan hapus nilai yang dinonaktifkan sebagai baris pertama dalam pengendali peristiwa. Sesuatu seperti $('.dropdown.option').attr('disabled',''); - catatan Saya belum menguji pemilih ini tetapi harusnya sudah dekat.   -  person Vanquished Wombat    schedule 14.10.2019
comment
Pertanyaan yang mencari bantuan debugging (mengapa kode ini tidak berfungsi?) harus menyertakan perilaku yang diinginkan, masalah atau kesalahan tertentu, dan kode terpendek yang diperlukan untuk mereproduksinya dalam pertanyaan itu sendiri.   -  person Pete    schedule 14.10.2019

Jawaban (1)


arrow_upward
1
arrow_downward

Saya pikir Anda menginginkan sesuatu seperti ini:

$(function() {
  $('#frm1').on('change', 'select[name="dropdown"]', function(event) {
    $('.dropdown option').removeAttr('disabled');
    $('.dropdown').each(function() {
      var v = $(this).val();
      if (v != "") {
        $('.dropdown').not(this).find("option[value='" + v + "']").attr("disabled", "disabled");
      }
    });
  });
});

Demo

$(function() {
  $('#frm1').on('change', 'select[name="dropdown"]', function(event) {
    $('.dropdown option').removeAttr('disabled');
    $('.dropdown').each(function() {
      var v = $(this).val();
      if (v != "") {
        $('.dropdown').not(this).find("option[value='" + v + "']").attr("disabled", "disabled");
      }
    });
  });
});
select {
  margin: 0.5em 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='frm1'>

  <select name="dropdown" class='dropdown'>
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>
  <select name="dropdown" class='dropdown'>
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>
  <select name="dropdown" class='dropdown'>
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>
  <select class="dropdown" class='dropdown'>
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>

</form>

person Carsten Løvbo Andersen    schedule 14.10.2019
comment
Terima kasih - ini sesuai dengan apa yang saya butuhkan. - person Tom; 21.10.2019