Question

我正在努力在代码中查找错误。每当更改选项时都会触发我的功能。我首先循环浏览所有选择，以查看已选择了哪些值。然后，我再次遍历他们，然后让他们的孩子隐藏所有已采用的选项。我敢肯定，堆栈溢出中还有其他帖子可以更好地做到这一点，但我宁愿拥有自己的原始代码。不过，我找不到我的错误。我到处都放置了警报，但是即使.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>

Answer 1

问题是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>

Answer 2

缓存您的选择器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 个答案: