Jquery - รายการแบบเลื่อนลงหลายรายการ ปิดการใช้งานรายการที่เลือกในรายการอื่น

ฉันมีรายการแบบเลื่อนลงหลายรายการ เมื่อฉันเลือกรายการหนึ่งในรายการหนึ่ง ฉันต้องการให้รายการนั้นถูกปิดใช้งานรายการอื่นเพื่อไม่ให้เลือกได้

แต่หากยกเลิกการเลือก ฉันต้องการให้รายการนั้นอยู่ในรายการอื่นๆ

จนถึงตอนนี้ฉันมี:

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

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

});

ซึ่งปิดใช้งานรายการที่เลือกในรายการอื่น แต่ฉันไม่สามารถดูวิธีเปลี่ยนกลับรายการนั้นหากถูกเลือกไว้

นี่คือซอที่แสดงสิ่งที่ฉันมีจนถึงตอนนี้

ความคิดใด ๆ ขอบคุณ


dropdown jquery select
person Tom    schedule 14.10.2019    source แหล่งที่มา
comment
กรุณารวม html ของคุณ   -  person Carsten Løvbo Andersen    schedule 14.10.2019
comment
ลิงก์ไปยังซอเพิ่มไปยังโพสต์ต้นฉบับ   -  person Tom    schedule 14.10.2019
comment
หากการเลือกตัวเลือกควรล้างผลกระทบที่ปิดใช้งานก่อนหน้านี้ ให้เพิ่มคำสั่งเพื่อเลือกตัวเลือกทั้งหมดและล้างค่าที่ปิดใช้งานเป็นบรรทัดแรกในตัวจัดการเหตุการณ์ บางอย่างเช่น $('.dropdown.option').attr('disabled',''); - โปรดทราบว่าฉันไม่ได้ทดสอบตัวเลือกนี้ แต่ควรจะปิด   -  person Vanquished Wombat    schedule 14.10.2019
comment
คำถามที่ต้องการความช่วยเหลือในการแก้ไขข้อบกพร่อง (เหตุใดโค้ดนี้จึงใช้งานไม่ได้) จะต้องรวมถึงพฤติกรรมที่ต้องการ ปัญหาหรือข้อผิดพลาดเฉพาะ และโค้ดที่สั้นที่สุดที่จำเป็นในการทำซ้ำ ในคำถามนั้นเอง   -  person Pete    schedule 14.10.2019

คำตอบ (1)


arrow_upward
1
arrow_downward

ฉันคิดว่าคุณต้องการสิ่งนี้:

$(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");
      }
    });
  });
});

สาธิต

$(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
ขอบคุณ - นี่เป็นสิ่งที่ฉันต้องการจริงๆ - person Tom; 21.10.2019