问做出选择后，使用Toggle在表格中显示信息
EN

Stack Overflow用户

提问于 2016-12-28 05:15:28

回答 0查看 133关注 0票数 1

我真的已经在这个问题上挣扎了一段时间，我已经走到了尽头，真的需要帮助。我想在页面上显示一个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>

javascript

select

toggle

hide

show-hide

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41352312

复制

相似问题

问做出选择后，使用Toggle在表格中显示信息
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问做出选择后，使用Toggle在表格中显示信息EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问做出选择后，使用Toggle在表格中显示信息
EN