一旦选择，使用切换显示表中的信息

我真的一直在努力与此一段时间，现在我真的很困难，真的需要帮助。我想要在页面上显示一个1行/ 4列的表格，并在最左边的列中有一个下拉菜单，然后根据从该下拉列表中选择的内容，我想要在剩余的1行/ 3中显示特定的信息列。这里是我所到之处，我只是不能让我的数据显示在我想要的列中。一旦选择，使用切换显示表中的信息

<html> 
<body onLoad="hideAll()"> 
<script> 
function toggleOption(thisselect) { 
    var selected = thisselect.options[thisselect.selectedIndex].value; 
    toggleRow(selected); 
} 

function toggleRow(id) { 
    var row = document.getElementById(id); 
    if (row.style.display == '') { 
    row.style.display = 'none'; 
    } 
    else { 
    row.style.display = ''; 
    } 
} 

function showRow(id) { 
    var row = document.getElementById(id); 
    row.style.display = ''; 
} 

function hideRow(id) { 
    var row = document.getElementById(id); 
    row.style.display = 'none'; 
} 

function hideAll() { 
hideRow('optionA'); 
hideRow('optionB'); 
hideRow('optionC'); 
hideRow('optionD'); 
} 

</script> 

<table> 
<tbody> 
    <tr> 
     <th>Size</th> 
     <th>Part Number</th> 
     <th>Description</th> 
     <th>Material</th> 
    </tr>  
<tr> 
    <td> 
<select id="options" onchange="toggleOption(this)"> 
<option value="optionA">3/16"</option> 
<option value="optionB">1/4"</option> 
<option value="optionC">5/16"</option> 
<option value="optionD">3/8"</option> 
</select> 
</td> 
<tr id="optionA"><td>3BMH</td><td>Brass Hose Mender</td><td>Brass</td></tr> 
<tr id="optionB"><td>4BMH</td><td>Brass Hose Mender</td><td>Brass</td></tr> 
<tr id="optionC"><td>5BMH</td><td>Brass Hose Mender</td><td>Brass</td></tr> 
<tr id="optionD"><td>6BMH</td><td>Brass Hose Mender</td><td>Brass</td></tr> 
</tr> 
</tbody> 
</table> 

</body> 
</html>

来源

2016-12-27 Ellen Harris

您可以添加hideAll（）;在toggleRow（选择）之前;在函数toggleOption中。 – gaetanoM

您所遇到的问题是，你的行（TR）应细胞（TD），但是这是一个非常糟糕的做法，你应该做的是只使用一排白衣四个单元里面，第一个与你的选择和其他人空，然后注入数据，以这些（只是改变你TD的innerHTML），这里是一个例子：

<html> 
    <head> 
    <script> 
     function toggleoption(opt) { 
      var selected = opt.options[opt.selectedIndex].value; 
      if ("optiona" === selected) { 
       document.getElementById("partn").innerHTML = "3BMH"; 
       document.getElementById("desc").innerHTML = "Brass Hose Mender"; 
       document.getElementById("mat").innerHTML = "Brass"; 
      } else if ("optionb" === selected) { 
       document.getElementById("partn").innerHTML = "4BMH"; 
       document.getElementById("desc").innerHTML = "Brass Hose Mender"; 
       document.getElementById("mat").innerHTML = "Brass"; 
      } else if ("optionc" === selected) { 
       document.getElementById("partn").innerHTML = "5BMH"; 
       document.getElementById("desc").innerHTML = "Brass Hose Mender"; 
       document.getElementById("mat").innerHTML = "Brass"; 
      } else if ("optiond" === selected) { 
       document.getElementById("partn").innerHTML = "6BMH"; 
       document.getElementById("desc").innerHTML = "Brass Hose Mender"; 
       document.getElementById("mat").innerHTML = "Brass"; 
      } 
     } 
    </script> 
    </head> 
    <body> 
    <table> 
     <tbody> 
     <tr> 
      <th>Size</th> 
      <th>Part Number</th> 
      <th>Description</th> 
      <th>Material</th> 
     </tr> 
     <tr> 
      <td> 
      <select id="options" onchange="toggleoption(this)"> 
       <option value="optiona">3/16"</option> 
       <option value="optionb">1/4"</option> 
       <option value="optionc">5/16"</option> 
       <option value="optiond">3/8"</option> 
      </select> 
      </td> 
      <td id="partn"></td> 
      <td id="desc"></td> 
      <td id="mat"></td> 
     </tr> 
     </tbody> 
    </table> 
    </body> 
</html>

当然这个代码可以在很大程度上改善和我”强烈建议使用jquery，但这取决于你。

来源

2016-12-27 21:51:25

我很感激你花时间和帮助我。我试图远离jquery，仅仅是因为我害怕在页面上失去速度。随着转移到JQuery，你会建议坚持使用.toggle？ –

我真的不需要这样做，你需要每个选项3个单元格和一个方法将它们包装在一起（我认为是你在哪里试图做的行），你可以通过设置相同的类和不同的ID根据每个单元格由相同的字符串开始，然后切换它们，但这将是一个混乱而难以维护的代码。 –

一旦选择，使用切换显示表中的信息

回答

相关问题