为什么不删除选项？答案

【问题标题】：Why isn't this removing the options?为什么不删除选项？
【发布时间】：2020-01-04 15:52:32
【问题描述】：

我很难在我的代码中找到错误。每当更改选项时都会触发我的功能。我首先遍历所有选择以查看已选择的值。然后我再次循环浏览它们，然后他们的孩子隐藏所有已采取的选项。我确信还有其他关于堆栈溢出的帖子有更好的方法来做到这一点，但我宁愿拥有我的原始代码。不过，我找不到我的错误。我到处都放了警报，但它们总是只被调用一次，即使 .length 大于 1。

谢谢！

编辑：

我刚刚意识到问题出在.removeAttr，所以如果有人能告诉我如何解决这个问题，那可能正是我需要的帮助。

$(document).on("change", function(e) {
  var hmmm = [];
  var facts = true;
  var allSelects = $(".student-three select");
  for (var i = 0; i < allSelects.length; i++) {
    if (allSelects[i].value != 0) {
      hmmm.push(allSelects[i].value);
    }
  }
  for (var i = 0; i < allSelects.length; i++) {
    for (var j = 0; j < allSelects[i].children.length; j++) {
      for (var z = 0; z < hmmm.length; z++) {
        if (allSelects[i].children[j].value == hmmm[z]) {
          allSelects[i].children[j].addAttr('hidden');
          facts = false;
        }
      }
      if (facts) {
        allSelects[i].children[j].removeAttr('hidden');
      }
    }
  }
});

<!DOCTYPE>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
  <div class="student-three">
    Choice 1:
    <select name="C1">
      <option value='0'>Select One</option>
      <option value='1'>Option 1
      </option>
      <option value='2'>Option 2
      </option>
    </select><br>Choice 2:
    <select name="C2">
      <option value='0'>Select One</option>
      <option value='1'>Option 1
      </option>
      <option value='2'>Option 2 
      </option>
    </select><br>Choice 3:
    <select name="C3">
      <option value='0'>Select One</option>
      <option value='1'>Option 1 
      </option>
      <option value='2'>Option 2
      </option>
    </select>
  </div>

</body>

</html>

【问题讨论】：

$(document).on("change" 应该是$(document).on("change", ".student-three select", function(e) {
我已经改了，但恐怕我还是不明白为什么 removeAttr 不起作用。
好的，让我深入了解
facts 是做什么用的？

标签： jquery html

【解决方案1】：

缓存你的选择器const $allSelects = $(".student-three select");
.map() 排列所有选定的值
使用:gt(0) 跳过第一个提示选项
将.prop() 用于"hidden" 属性 - 带有所需逻辑的回调
使用Array.includes() 检查选定值数组中是否存在值

const $allSelects = $(".student-three select");

$allSelects.on("change", function() {

  const sel = $allSelects.get().map(el => el.value); // selected values to array
  $allSelects.find('option:gt(0)').prop('hidden', function() {
    return !this.selected && sel.includes(this.value);
  });
  
});

<div class="student-three">
  Choice 1:
  <select name="C1">
    <option value='0'>Select One</option>
    <option value='1'>Option 1</option>
    <option value='2'>Option 2</option>
    <option value='3'>Option 3</option>
  </select><br>Choice 2:
  <select name="C2">
    <option value='0'>Select One</option>
    <option value='1'>Option 1</option>
    <option value='2'>Option 2</option>
    <option value='3'>Option 3</option>
  </select><br>Choice 3:
  <select name="C3">
    <option value='0'>Select One</option>
    <option value='1'>Option 1</option>
    <option value='2'>Option 2</option>
    <option value='3'>Option 3</option>
  </select>
</div>

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>

【讨论】：

【解决方案2】：

问题是jquery的操作符[]没有返回jquery元素；它返回一个 DOM 元素。

这个元素没有方法removeAttr()（相当于removeAttribute()），所以你应该把它传递给$()来得到一个jquery元素。

另外，jquery 没有 addAttr() 与 removeAttr() 相反。相反，您应该使用attr(<>, true)。见Add disabled attribute to input element using Javascript。

$(document).on("change", function(e) {
  var hmmm = [];
  var facts = true;
  var allSelects = $(".student-three select");
  for (var i = 0; i < allSelects.length; i++) {
    if (allSelects[i].value != 0) {
      hmmm.push(allSelects[i].value);
    }
  }
  for (var i = 0; i < allSelects.length; i++) {
    for (var j = 0; j < allSelects[i].children.length; j++) {
      for (var z = 0; z < hmmm.length; z++) {
        if (allSelects[i].children[j].value == hmmm[z]) {
          $(allSelects[i].children[j]).attr('hidden', true);
          facts = false;
        }
      }
      if (facts) {
        $(allSelects[i].children[j]).removeAttr('hidden');
      }
    }
  }
});

<!DOCTYPE>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
  <div class="student-three">
    Choice 1:
    <select name="C1">
      <option value='0'>Select One</option>
      <option value='1'>Option 1
      </option>
      <option value='2'>Option 2
      </option>
    </select><br>Choice 2:
    <select name="C2">
      <option value='0'>Select One</option>
      <option value='1'>Option 1
      </option>
      <option value='2'>Option 2 
      </option>
    </select><br>Choice 3:
    <select name="C3">
      <option value='0'>Select One</option>
      <option value='1'>Option 1 
      </option>
      <option value='2'>Option 2
      </option>
    </select>
  </div>

</body>

</html>

【讨论】：

非常好。我会在带有 j 的 for 语句之后添加一个 facts = true。否则隐藏/错误代码并没有真正做任何事情。