JavaScript: onchange 函数仅在 50% 的情况下有效

Question

先声明一下，我不经常使用JavaScript，所以请原谅这很可能是新手的简单误解。

我有一个简单的 HTML 表格，它部分由一个 select 下拉菜单组成，其中包含选项 0 到 10，然后是 10 个重复的 select下拉菜单。目标是根据用户在第一个下拉列表中的选择，仅显示一定数量的复制下拉列表集。为此，我为每个复制的下拉列表集提供了一个唯一 ID，并且 JavaScript 会在每次更改第一个 select 下拉列表时切换每个下拉列表的 style.display 属性。

我所用的方法适用于各种各样的情况。例如，将选择从 4 更改为 5 会按预期工作，但 5 到 6 不会。 9 到 10 有效，但 10 到 9 无效。

有趣的是，我早些时候发现如果 case 中第运行秒的 for 循环比第一个长，那么 case 不会执行正确地——以前，我让每个 none for 循环运行在每个 case 中首先循环，而不考虑长度，但后来将它们切换为 cases 更大比 5。现在第一个选择总是有效，但随后的用户选择变化是奇怪的气质。

这是我当前的代码（抱歉，长度过长）：

function kollege() {
switch (document.getElementById('college').value) {
  case '0':
    none = document.querySelectorAll('#c1,#c2,#c3,#c4,#c5,#c6,#c7,#c8,#c9,#c10');
    for (i = 0; i < none.length; i++) {
      none[i].style.display = 'none';
    }
    break;
  case '1':
    none = document.querySelectorAll('#c2,#c3,#c4,#c5,#c6,#c7,#c8,#c9,#c10');
    for (i = 0; i < none.length; i++) {
      none[i].style.display = 'none';
    }
    inline = document.querySelectorAll('#c1');
    for (i = 0; i < none.length; i++) {
      inline[i].style.display = 'block';
    }
    break;
  case '2':
    none = document.querySelectorAll('#c3,#c4,#c5,#c6,#c7,#c8,#c9,#c10');
    for (i = 0; i < none.length; i++) {
      none[i].style.display = 'none';
    }
    inline = document.querySelectorAll('#c1,#c2');
    for (i = 0; i < none.length; i++) {
      inline[i].style.display = 'block';
    }
    break;
  case '3':
    none = document.querySelectorAll('#c4,#c5,#c6,#c7,#c8,#c9,#c10');
    for (i = 0; i < none.length; i++) {
      none[i].style.display = 'none';
    }
    inline = document.querySelectorAll('#c1,#c2,#c3');
    for (i = 0; i < none.length; i++) {
      inline[i].style.display = 'block';
    }
    break;
  case '4':
    none = document.querySelectorAll('#c5,#c6,#c7,#c8,#c9,#c10');
    for (i = 0; i < none.length; i++) {
      none[i].style.display = 'none';
    }
    inline = document.querySelectorAll('#c1,#c2,#c3,#c4');
    for (i = 0; i < none.length; i++) {
      inline[i].style.display = 'block';
    }
    break;
  case '5':
    none = document.querySelectorAll('#c6,#c7,#c8,#c9,#c10');
    for (i = 0; i < none.length; i++) {
      none[i].style.display = 'none';
    }
    inline = document.querySelectorAll('#c1,#c2,#c3,#c4,#c5');
    for (i = 0; i < none.length; i++) {
      inline[i].style.display = 'block';
    }
    break;
  case '6':
    inline = document.querySelectorAll('#c1,#c2,#c3,#c4,#c5,#c6');
    for (i = 0; i < none.length; i++) {
      inline[i].style.display = 'block';
    }
    none = document.querySelectorAll('#c7,#c8,#c9,#c10');
    for (i = 0; i < none.length; i++) {
      none[i].style.display = 'none';
    }
    break;
  case '7':
    inline = document.querySelectorAll('#c1,#c2,#c3,#c4,#c5,#c6,#c7');
    for (i = 0; i < none.length; i++) {
      inline[i].style.display = 'block';
    }
    none = document.querySelectorAll('#c8,#c9,#c10');
    for (i = 0; i < none.length; i++) {
      none[i].style.display = 'none';
    }
    break;
  case '8':
    inline = document.querySelectorAll('#c1,#c2,#c3,#c4,#c5,#c6,#c7,#c8');
    for (i = 0; i < none.length; i++) {
      inline[i].style.display = 'block';
    }
    none = document.querySelectorAll('#c9,#c10');
    for (i = 0; i < none.length; i++) {
      none[i].style.display = 'none';
    }
    break;
  case '9':
    inline = document.querySelectorAll('#c1,#c2,#c3,#c4,#c5,#c6,#c7,#c8,#c9');
    for (i = 0; i < none.length; i++) {
      inline[i].style.display = 'block';
    }
    none = document.querySelectorAll('#c10');
    for (i = 0; i < none.length; i++) {
      none[i].style.display = 'none';
    }
    break;
  case '10':
    inline = document.querySelectorAll('#c1,#c2,#c3,#c4,#c5,#c6,#c7,#c8,#c9,#c10');
    for (i = 0; i < none.length; i++) {
      inline[i].style.display = 'block';
    }
    break;
}
}

<form action="." method="POST">
  <label for="college">Number of Children who Require College Funding</label>
  <select name="college" id="college" onchange="kollege();">
    <option value="0">0</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>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  </br>
  <div id="c1">
    <label for="type1">College Type</label>
    <select name="type1">
      <option value="26000">Private/Out-of-State Public</option>
      <option value="10000">Public In-State</option>
      <option value="3000">Community College</option>
    </select>
    <label for="coll1">Years of College</label>
    <select name="coll1">
      <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>
      <option value="8">8</option>
    </select>
  </div>
  <div id="c2">
    <label for="type2">College Type</label>
    <select name="type2">
      <option value="26000">Private/Out-of-State Public</option>
      <option value="10000">Public In-State</option>
      <option value="3000">Community College</option>
    </select>
    <label for="coll2">Years of College</label>
    <select name="coll2">
      <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>
      <option value="8">8</option>
    </select>
  </div>
  <div id="c3">
    <label for="type3">College Type</label>
    <select name="type3">
      <option value="26000">Private/Out-of-State Public</option>
      <option value="10000">Public In-State</option>
      <option value="3000">Community College</option>
    </select>
    <label for="coll3">Years of College</label>
    <select name="coll3">
      <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>
      <option value="8">8</option>
    </select>
  </div>
  <div id="c4">
    <label for="type4">College Type</label>
    <select name="type4">
      <option value="26000">Private/Out-of-State Public</option>
      <option value="10000">Public In-State</option>
      <option value="3000">Community College</option>
    </select>
    <label for="coll4">Years of College</label>
    <select name="coll4">
      <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>
      <option value="8">8</option>
    </select>
  </div>
  <div id="c5">
    <label for="type5">College Type</label>
    <select name="type5">
      <option value="26000">Private/Out-of-State Public</option>
      <option value="10000">Public In-State</option>
      <option value="3000">Community College</option>
    </select>
    <label for="coll5">Years of College</label>
    <select name="coll5">
      <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>
      <option value="8">8</option>
    </select>
  </div>
  <div id="c6">
    <label for="type6">College Type</label>
    <select name="type6">
      <option value="26000">Private/Out-of-State Public</option>
      <option value="10000">Public In-State</option>
      <option value="3000">Community College</option>
    </select>
    <label for="coll6">Years of College</label>
    <select name="coll6">
      <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>
      <option value="8">8</option>
    </select>
  </div>
  <div id="c7">
    <label for="type7">College Type</label>
    <select name="type7">
      <option value="26000">Private/Out-of-State Public</option>
      <option value="10000">Public In-State</option>
      <option value="3000">Community College</option>
    </select>
    <label for="coll7">Years of College</label>
    <select name="coll7">
      <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>
      <option value="8">8</option>
    </select>
  </div>
  <div id="c8">
    <label for="type8">College Type</label>
    <select name="type8">
      <option value="26000">Private/Out-of-State Public</option>
      <option value="10000">Public In-State</option>
      <option value="3000">Community College</option>
    </select>
    <label for="coll8">Years of College</label>
    <select name="coll8">
      <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>
      <option value="8">8</option>
    </select>
  </div>
  <div id="c9">
    <label for="type9">College Type</label>
    <select name="type9">
      <option value="26000">Private/Out-of-State Public</option>
      <option value="10000">Public In-State</option>
      <option value="3000">Community College</option>
    </select>
    <label for="coll9">Years of College</label>
    <select name="coll9">
      <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>
      <option value="8">8</option>
    </select>
  </div>
  <div id="c10">
    <label for="type10">College Type</label>
    <select name="type10">
      <option value="26000">Private/Out-of-State Public</option>
      <option value="10000">Public In-State</option>
      <option value="3000">Community College</option>
    </select>
    <label for="coll10">Years of College</label>
    <select name="coll10">
      <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>
      <option value="8">8</option>
    </select>
  </div>

是什么原因导致一些选择更改起作用，而另一些不起作用？我怎样才能改变我的 JavaScript 来解释它？

Answer 1

有更有效的方法来执行此任务；但是，此代码未按预期工作的原因是因为您在所有情况下都没有正确匹配 for 循环变量。

例如：

case '5':
none = document.querySelectorAll('#c6,#c7,#c8,#c9,#c10');
for (i = 0; i < none.length; i++) {
  none[i].style.display = 'none';
}
inline = document.querySelectorAll('#c1,#c2,#c3,#c4,#c5');
for (i = 0; i < none.length; i++) {
  inline[i].style.display = 'block';
}
break;

在第二个 for 循环中，您应该检查 inline 的长度，而不是 none 的长度。即：

case '5':
none = document.querySelectorAll('#c6,#c7,#c8,#c9,#c10');
for (i = 0; i < none.length; i++) {
  none[i].style.display = 'none';
}
inline = document.querySelectorAll('#c1,#c2,#c3,#c4,#c5');
for (i = 0; i < inline.length; i++) {
  inline[i].style.display = 'block';
}
break;

此错误在您的代码中重复多次。

JavaScript: onchange 函数仅在 50% 的情况下有效

JavaScript: onchange function works in only 50% of cases

javascript

onchange