javascript - 我需要我的下拉列表分别显示和/或隐藏列

标签 javascript html html-table dropdown

我的下拉列表编号为表列表，1-16。根据您选择的下拉列表编号，我需要显示很多表格。我两周前才开始学习 Javascript，所以请原谅我的草率编码。我可能还为此绕了一大圈，而且我还没有准备好转向 J-query。该代码有效，但由于某种原因，第二个选项没有显示。并且表格上的标题发生了变化。

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>

最佳答案

我已经将一些id更改为类，利用您已经实现的选定编号的优势，只需使用一些className字符串连接循环遍历项目..希望如此帮助

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>

关于javascript - 我需要我的下拉列表分别显示和/或隐藏列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65995070/

上一篇：python - 使用 CSV.QUOTE_NONNUMERIC 而不引用标题

下一篇：node.js - 无法使用 typescript 扩展 node.js 全局

相关文章：

javascript - JQuery 将 RSS feed 限制为 4 个项目

html - 五月天 : CSS fonts look horrible different in IE compared to Chrome/Firefox after update

css - 在表格的交替行上显示不同的样式(在循环内)

html - 如何将两张图片拼接在一起

javascript - Typescript 真的向后兼容吗？

javascript - 操纵 V8 ast

javascript - 本地通知不显示

javascript - 如何在不调整大小的情况下清空和加载 div？

html - 以图像为背景的悬停效果

html - 如何使用 CSS 获得主体颜色不同的圆 Angular table ？

©2024 IT工具网  联系我们