I need my dropdown to show and or hide columns respectively

user_15123685 0
Viewed 40

my dropdown is numbered to the table list, 1-16. depending on the dropdown number you pick i need that many tables to show. I just started learning Javascript 2 weeks ago so excuse my sloppy coding. I'm also probably going a long roundabout arse way about this, and I am not ready to move on to J-query just yet. the code works but for some reason the 2nd option doesn't show. and the headers on the table shift.

HTML code

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>

dropdown html-table html javascript
2 Answers

I've changed some ids to classes with the advantage from the selected number you already implemented just loop over the items with some className string concatenation .. hope this helps

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>

user_20081110

You declared var x twice, for trunk2 and trunk12. Thus making "trunk2" display style to remain "none".

user_151234890
Related