根据值

Question

我要做的是从其他列表中选择项目时禁用列表中的项目。

例如： 如果我在list1中选择一个项目，那么我想在其他列表中禁用该项目（list2-list4）

如果我然后在list1中选择另一个项目，那么我希望它重新启用所有列表中的上一个项目，然后在其他列表中禁用新选择的项目。

我希望所有列表都能实现这一点。因此，如果我在另一个列表中选择一个项目，它也应该禁用其他列表中的该项目。

我试图在不使用jQuery的情况下在JavaScript中执行此操作。

我在HTML页面上有4个选择框，如下所示：

<select id="list1" onClick="disable_item();">
  <option value="000">Item 0</option>
  <option value="111">Item 1</option>
  <option value="112">Item 2</option>
  <option value="113">Item 3</option>
  <option value="114">Item 4</option>
  <option value="115">Item 5</option>
  <option value="116">Item 6</option>
  <option value="117">Item 7</option>
</select>

<select id="list2" onClick="disable_item();">
  <option value="000">Item 0</option>
  <option value="111">Item 1</option>
  <option value="112">Item 2</option>
  <option value="113">Item 3</option>
  <option value="114">Item 4</option>
  <option value="115">Item 5</option>
  <option value="116">Item 6</option>
  <option value="117">Item 7</option>
</select>

<select id="list3" onClick="disable_item();">
  <option value="000">Item 0</option>
  <option value="111">Item 1</option>
  <option value="112">Item 2</option>
  <option value="113">Item 3</option>
  <option value="114">Item 4</option>
  <option value="115">Item 5</option>
  <option value="116">Item 6</option>
  <option value="117">Item 7</option>
</select>

<select id="list4" onClick="disable_item();">
  <option value="000">Item 0</option>
  <option value="111">Item 1</option>
  <option value="112">Item 2</option>
  <option value="113">Item 3</option>
  <option value="114">Item 4</option>
  <option value="115">Item 5</option>
  <option value="116">Item 6</option>
  <option value="117">Item 7</option>
</select>

我尝试使用的JavaScript是：

function disable_item() {

  var selectobject = document.getElementById("reader1_area")
  for (var i = 0; i < 4; i++) {
    if (document.getElementById("list1").value == document.getElementById("list1").options[i].value) {
      document.getElementById("list2")[i].disabled = true;
      document.getElementById("list3")[i].disabled = true;
      document.getElementById("list4")[i].disabled = true;
    }


    if (document.getElementById("list2").value == document.getElementById("list2").options[i].value) {
      document.getElementById("list1")[i].disabled = true;
      document.getElementById("list3")[i].disabled = true;
      document.getElementById("list4")[i].disabled = true;
    }


    if (document.getElementById("list3").value == document.getElementById("list3").options[i].value) {
      document.getElementById("list1")[i].disabled = true;
      document.getElementById("list2")[i].disabled = true;
      document.getElementById("list4")[i].disabled = true;
    }


    if (document.getElementById("list4").value == document.getElementById("list4").options[i].value) {
      document.getElementById("list1")[i].disabled = true;
      document.getElementById("list2")[i].disabled = true;
      document.getElementById("list3")[i].disabled = true;
    }



  }
}

但是，我不认为这是正确的，我相信可能有更好的方法来做到这一点但是无法解决这个问题。

根据所选项目禁用和重新启用项目的最佳方法是什么？

Answer 1

看看这个jsfiddle，这里没有使用jQuery，只有纯js。这里使用事件和子元素的迭代，而不是显式启用和禁用元素：

var selects_list = document.querySelectorAll('select');
var selects_array = Array.prototype.slice.call(selects_list);

selects_array.forEach(function(someSelect, idx) {
    someSelect.onchange = function(ev) {
        selects_array.forEach(function(tmpSelect) {

                // Disable options of all select elements
                var tmp_item = tmpSelect.querySelector('option[value="' + ev.target.value + '"]');
                tmp_item.disabled = true;

        });
    };
});