Question

我有2个下拉列表，其中一个将显示在页面上，具体取决于下拉列表的选择：

在firefox中，我得到的形式是：在第二行中为两个下拉列表选择标记。在Chrome和IE中，它按预期完美运行。

＆＃13;

var flag = 1;

function showHide() {

  if (flag == 1) {
    document.getElementById('dbTypeDropdown1').style.display = "none";
    document.getElementById('dbTypeDropdown2').style.display = "block";
    document.getElementById('dbTypelable1').style.display = "none";
    document.getElementById('dbTypelable2').style.display = "block";
    flag = 0;
  } else {
    document.getElementById('dbTypeDropdown1').style.display = "block";
    document.getElementById('dbTypeDropdown2').style.display = "none";
    document.getElementById('dbTypelable1').style.display = "block";
    document.getElementById('dbTypelable2').style.display = "none";
    flag = 1;
  }
}

function loadHide() {
  document.getElementById('dbTypeDropdown1').style.display = "block";
  document.getElementById('dbTypeDropdown2').style.display = "none";
  document.getElementById('dbTypelable1').style.display = "block";
  document.getElementById('dbTypelable2').style.display = "none";
}

＆＃13;

<body onLoad=loadHide()>
  <table>
    <tr>
      <td>
        <label path="osType" style="text-align: left;" id="osTypelable"><b>Product Type</b>&nbsp;&nbsp;</label>
      </td>
      <td>
        <select path="osType" style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()">
          <option value="windows">Windows</option>
          <option value="linux">Linux</option>
        </select>
      </td>
    </tr>

    <tr></tr>
    <tr></tr>

    <tr>
      <td id="dbTypelable1">
        <label path="dbType1" style="text-align: left;"><b>Database Type</b>
        </label>
      </td>
      <td id="dbTypeDropdown1">
        <select path="dbType1" style="width:205px; height:25px">
          <option value="embedded">Embedded</option>
          <option value="mssql2008">MS SQL 2008</option>
          <option value="mssql2012">MS SQL 2012</option>
          <option value="mssql2014">MS SQL 2014</option>
          <option value="oracle11">Oracle 11g</option>
          <option value="oracle12">Oracle 12c</option>
        </select>
      </td>
      <td id="dbTypelable2">
        <label path="dbType2" style="text-align: left;"><b>Database Type</b>
        </label>
      </td>
      <td id="dbTypeDropdown2">
        <select path="dbType2" style="width:205px; height:25px;">

          <option value="embedded">Embedded</option>
          <option value="oracle11">Oracle 11g</option>
          <option value="oracle12">Oracle 12c</option>
        </select>
      </td>
    </tr>
  </table>

</body>

＆＃13;

Answer 1

Chrome的错误纠正正在为您解决问题，但问题仍然存在。问题不仅出在Firefox中。

你有一些问题：

你有多个<tr>标签 - 你说你想把它放在一排吗？
如果您需要多个colspan代码，则表示您未使用<tr>。
您正在使用display: block; - 您无法在表格元素上使用display: block进行切换，因为它会破坏表格单元格的工作方式。您可以使用display: table-cell和display: none，但不能使用display: block。

以下是您修改后的HTML：（JSFiddle：https://jsfiddle.net/1ntn0yh5/）

  <table>
    <tr>
      <td>
        <label path="osType" style="text-align: left;" id="osTypelable"><b>Product Type</b>&nbsp;&nbsp;</label>
      </td>
      <td>
        <select path="osType" style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()">
          <option value="windows">Windows</option>
          <option value="linux">Linux</option>
        </select>
      </td>
      <td id="dbTypelable1">
        <label path="dbType1" style="text-align: left;"><b>Database Type</b>
        </label>
      </td>
      <td id="dbTypeDropdown1">
        <select path="dbType1" style="width:205px; height:25px">
          <option value="embedded">Embedded</option>
          <option value="mssql2008">MS SQL 2008</option>
          <option value="mssql2012">MS SQL 2012</option>
          <option value="mssql2014">MS SQL 2014</option>
          <option value="oracle11">Oracle 11g</option>
          <option value="oracle12">Oracle 12c</option>
        </select>
      </td>
      <td id="dbTypelable2">
        <label path="dbType2" style="text-align: left;"><b>Database Type</b>
        </label>
      </td>
      <td id="dbTypeDropdown2">
        <select path="dbType2" style="width:205px; height:25px;">
          <option value="embedded">Embedded</option>
          <option value="oracle11">Oracle 11g</option>
          <option value="oracle12">Oracle 12c</option>
        </select>
      </td>
    </tr>
  </table>

Firefox第二列正在换行

1 个答案: