Question

我一直在努力解决这个问题已经有一段时间了，而且我很沮丧并且需要帮助。我想在页面上显示一行/ 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>

Answer 1

你遇到的问题是你的行（tr）应该是单元格（td），但这是一个非常糟糕的方法，你应该做的只是在里面只使用一行四个单元格，第一个用你的select和其他的空，然后将数据注入那些（只需更改你的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，但这取决于你。

选择完成后，使用切换显示表中的信息

1 个答案: