Question

让我先说一下我不经常使用JavaScript，所以请原谅最有可能是新手的简单误解。

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

我在各种各样的案件中有所作为。例如，选择从4到5的变化按预期工作，但5到6不能。 9到10个工作，但10到9没有。

有趣的是，我之前发现，如果在for中第二次运行的case循环比第一次更长，则case无法正常执行 - 之前，我每个none for循环在每个case中首先运行，无论长度如何，但是已经将case s的那些循环切换为大于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％的情况下起作用

1 个答案: