我需要我的下拉菜单分别显示和/或隐藏列

Question

我的下拉列表编号在 table 列表中，1-16。根据您选择的下拉列表数字，我需要那么多 table 来显示。我 2 周前才开始学习 Javascript，所以请原谅我草率的编码。我也可能在这方面走了很长的弯路，我还没有准备好继续 J-query。该代码有效，但由于某种原因，第二个选项未显示。和 table 班次上的 headers。

HTML代码

function person() {
  var t = document.getElementById("trunk");
  var o = t.options[t.selectedIndex].value;
  var a = document.getElementById("trunk1");
  var x = document.getElementById("trunk2");
  var q = document.getElementById("trunk3");
  var w = document.getElementById("trunk4");
  var e = document.getElementById("trunk5");
  var r = document.getElementById("trunk6");
  var t = document.getElementById("trunk7");
  var y = document.getElementById("trunk8");
  var u = document.getElementById("trunk9");
  var i = document.getElementById("trunk10");
  var z = document.getElementById("trunk11");
  var x = document.getElementById("trunk12");
  var c = document.getElementById("trunk13");
  var v = document.getElementById("trunk14");
  var b = document.getElementById("trunk15");
  var n = document.getElementById("trunk16");

  if (o === "1") {
    a.style.display = "block";
    x.style.display = "none";
    q.style.display = "none";
    w.style.display = "none";
    e.style.display = "none";
    r.style.display = "none";
    t.style.display = "none";
    y.style.display = "none";
    u.style.display = "none";
    i.style.display = "none";
    z.style.display = "none";
    x.style.display = "none";
    c.style.display = "none";
    v.style.display = "none";
    b.style.display = "none";
    n.style.display = "none";
  } else  if (o === "2") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "none";
    w.style.display = "none";
    e.style.display = "none";
    r.style.display = "none";
    t.style.display = "none";
    y.style.display = "none";
    u.style.display = "none";
    i.style.display = "none";
    z.style.display = "none";
    x.style.display = "none";
    c.style.display = "none";
    v.style.display = "none";
    b.style.display = "none";
    n.style.display = "none";
  } else  if (o === "3") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "none";
    e.style.display = "none";
    r.style.display = "none";
    t.style.display = "none";
    y.style.display = "none";
    u.style.display = "none";
    i.style.display = "none";
    z.style.display = "none";
    x.style.display = "none";
    c.style.display = "none";
    v.style.display = "none";
    b.style.display = "none";
    n.style.display = "none";
  } else  if (o === "4") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "block";
    e.style.display = "none";
    r.style.display = "none";
    t.style.display = "none";
    y.style.display = "none";
    u.style.display = "none";
    i.style.display = "none";
    z.style.display = "none";
    x.style.display = "none";
    c.style.display = "none";
    v.style.display = "none";
    b.style.display = "none";
    n.style.display = "none";
  } else  if (o === "5") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "block";
    e.style.display = "block";
    r.style.display = "none";
    t.style.display = "none";
    y.style.display = "none";
    u.style.display = "none";
    i.style.display = "none";
    z.style.display = "none";
    x.style.display = "none";
    c.style.display = "none";
    v.style.display = "none";
    b.style.display = "none";
    n.style.display = "none";
  } else  if (o === "6") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "block";
    e.style.display = "block";
    r.style.display = "block";
    t.style.display = "none";
    y.style.display = "none";
    u.style.display = "none";
    i.style.display = "none";
    z.style.display = "none";
    x.style.display = "none";
    c.style.display = "none";
    v.style.display = "none";
    b.style.display = "none";
    n.style.display = "none";
  } else  if (o === "7") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "block";
    e.style.display = "block";
    r.style.display = "block";
    t.style.display = "block";
    y.style.display = "none";
    u.style.display = "none";
    i.style.display = "none";
    z.style.display = "none";
    x.style.display = "none";
    c.style.display = "none";
    v.style.display = "none";
    b.style.display = "none";
    n.style.display = "none";
  } else  if (o === "8") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "block";
    e.style.display = "block";
    r.style.display = "block";
    t.style.display = "block";
    y.style.display = "block";
    u.style.display = "none";
    i.style.display = "none";
    z.style.display = "none";
    x.style.display = "none";
    c.style.display = "none";
    v.style.display = "none";
    b.style.display = "none";
    n.style.display = "none";
  } else  if (o === "9") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "block";
    e.style.display = "block";
    r.style.display = "block";
    t.style.display = "block";
    y.style.display = "block";
    u.style.display = "block";
    i.style.display = "none";
    z.style.display = "none";
    x.style.display = "none";
    c.style.display = "none";
    v.style.display = "none";
    b.style.display = "none";
    n.style.display = "none";
  } else if (o === "10") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "block";
    e.style.display = "block";
    r.style.display = "block";
    t.style.display = "block";
    y.style.display = "block";
    u.style.display = "block";
    i.style.display = "block";
    z.style.display = "none";
    x.style.display = "none";
    c.style.display = "none";
    v.style.display = "none";
    b.style.display = "none";
    n.style.display = "none";
  } else if (o === "11") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "block";
    e.style.display = "block";
    r.style.display = "block";
    t.style.display = "block";
    y.style.display = "block";
    u.style.display = "block";
    i.style.display = "block";
    z.style.display = "block";
    x.style.display = "none";
    c.style.display = "none";
    v.style.display = "none";
    b.style.display = "none";
    n.style.display = "none";
  } else if (o === "12") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "block";
    e.style.display = "block";
    r.style.display = "block";
    t.style.display = "block";
    y.style.display = "block";
    u.style.display = "block";
    i.style.display = "block";
    z.style.display = "block";
    x.style.display = "block";
    c.style.display = "none";
    v.style.display = "none";
    b.style.display = "none";
    n.style.display = "none";
  } else if (o === "13") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "block";
    e.style.display = "block";
    r.style.display = "block";
    t.style.display = "block";
    y.style.display = "block";
    u.style.display = "block";
    i.style.display = "block";
    z.style.display = "block";
    x.style.display = "block";
    c.style.display = "block";
    v.style.display = "none";
    b.style.display = "none";
    n.style.display = "none";
  } else if (o === "14") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "block";
    e.style.display = "block";
    r.style.display = "block";
    t.style.display = "block";
    y.style.display = "block";
    u.style.display = "block";
    i.style.display = "block";
    z.style.display = "block";
    x.style.display = "block";
    c.style.display = "block";
    v.style.display = "block";
    b.style.display = "none";
    n.style.display = "none";
  } else if (o === "15") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "block";
    e.style.display = "block";
    r.style.display = "block";
    t.style.display = "block";
    y.style.display = "block";
    u.style.display = "block";
    i.style.display = "block";
    z.style.display = "block";
    x.style.display = "block";
    c.style.display = "block";
    v.style.display = "block";
    b.style.display = "block";
    n.style.display = "none";
  } else if (o === "16") {
    a.style.display = "block";
    x.style.display = "block";
    q.style.display = "block";
    w.style.display = "block";
    e.style.display = "block";
    r.style.display = "block";
    t.style.display = "block";
    y.style.display = "block";
    u.style.display = "block";
    i.style.display = "block";
    z.style.display = "block";
    x.style.display = "block";
    c.style.display = "block";
    v.style.display = "block";
    b.style.display = "block";
    n.style.display = "block";
  }
  
}

System Name: <input type="text" name="Channels" placeholder="T-XXXX (Protocol)"> 
<p></p>

<select>
    <option value="Analog Conventional">Analog Conventional</option>
    <option value="LTR Trunking">LTR Trunking</option>
    <option value="NXDN Conventional">NXDN Conventional</option>
    <option value="NXDN Site Roaming">NXDN Site Roaming</option>
    <option value="NXDN Site Roaming with RAN">NXDN Site Roaming with RAN</option>
    <option value="NXDN Trunking" selected="selected">NXDN Trunking</option>
</select>

<p></p>
Number of Personalities: <p></p>
<select id="trunk" onchange="person()">
    <option value=""></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>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
</select>

<p></p>

<table>

   <tr>
    <th>No</th>
    <th>Personality</th>
   </tr>

   <tr id="trunk1" style="display: none;">
    <td style="text-align:center;">1</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk2" style="display: none;">
    <td style="text-align:center;">2</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk3" style="display: none;">
    <td style="text-align:center;">3</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk4" style="display: none;">
    <td style="text-align:center;">4</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk5" style="display: none;">
    <td style="text-align:center;">5</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk6" style="display: none;">
    <td style="text-align:center;">6</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk7" style="display: none;">
    <td style="text-align:center;">7</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk8" style="display: none;">
    <td style="text-align:center;">8</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk9" style="display: none;">
    <td style="text-align:center;">9</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk10" style="display: none;">
    <td style="text-align:center;">10</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk11" style="display: none;">
    <td style="text-align:center;">11</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk12" style="display: none;">
    <td style="text-align:center;">12</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk13" style="display: none;">
    <td style="text-align:center;">13</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk14" style="display: none;">
    <td style="text-align:center;">14</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk15" style="display: none;">
    <td style="text-align:center;">15</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr id="trunk16" style="display: none;">
    <td style="text-align:center;">16</td>
    <td><input type="text" name="Frequency"></td>
   </tr>
</table>

Answer 1

我已经将一些 id 更改为类，利用您已经实现的所选数字的优势，只需循环使用一些 className string concatenation 的项目..希望这有帮助

function person() {
  var t = document.getElementById("trunk");
  var o = t.options[t.selectedIndex].value;
  
  // hide all, in case someone choses to select a lower number
  // then the preivously selected one
  [...document.querySelectorAll('[class^="trunk"]')].forEach(
    trunc => trunc.style.display = 'none'
  );
  
  for(let i=1; i <= o; i++) {
      document.querySelector(".trunk" + i).style.display = "block";
  }
}

System Name: <input type="text" name="Channels" placeholder="T-XXXX (Protocol)"> 
<p></p>

<select>
    <option value="Analog Conventional">Analog Conventional</option>
    <option value="LTR Trunking">LTR Trunking</option>
    <option value="NXDN Conventional">NXDN Conventional</option>
    <option value="NXDN Site Roaming">NXDN Site Roaming</option>
    <option value="NXDN Site Roaming with RAN">NXDN Site Roaming with RAN</option>
    <option value="NXDN Trunking" selected="selected">NXDN Trunking</option>
</select>

<p></p>
Number of Personalities: <p></p>
<select id="trunk" onchange="person()">
    <option value=""></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>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
</select>

<p></p>

<table>

   <tr>
    <th>No</th>
    <th>Personality</th>
   </tr>

   <tr class="trunk1" style="display: none;">
    <td style="text-align:center;">1</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk2" style="display: none;">
    <td style="text-align:center;">2</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk3" style="display: none;">
    <td style="text-align:center;">3</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk4" style="display: none;">
    <td style="text-align:center;">4</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk5" style="display: none;">
    <td style="text-align:center;">5</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk6" style="display: none;">
    <td style="text-align:center;">6</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk7" style="display: none;">
    <td style="text-align:center;">7</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk8" style="display: none;">
    <td style="text-align:center;">8</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk9" style="display: none;">
    <td style="text-align:center;">9</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk10" style="display: none;">
    <td style="text-align:center;">10</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk11" style="display: none;">
    <td style="text-align:center;">11</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk12" style="display: none;">
    <td style="text-align:center;">12</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk13" style="display: none;">
    <td style="text-align:center;">13</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk14" style="display: none;">
    <td style="text-align:center;">14</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk15" style="display: none;">
    <td style="text-align:center;">15</td>
    <td><input type="text" name="Frequency"></td>
   </tr>

   <tr class="trunk16" style="display: none;">
    <td style="text-align:center;">16</td>
    <td><input type="text" name="Frequency"></td>
   </tr>
</table>

Answer 2

您为 trunk2 和 trunk12 声明了两次 var x。从而使“trunk2”的显示样式保持为“none”。

我需要我的下拉菜单分别显示和/或隐藏列

I need my dropdown to show and or hide columns respectively

html

javascript

html-table

dropdown