组合框对齐在chrome和Firefox中失败。该问题似乎与style.display =“ inline”有关。正在寻找解决方案

Question

function RefiPurpose(whichone) {
  if (whichone == "Test 1" || whichone == "") {
    document.getElementById("refi_purp").style.display = "inline";
  } else if (whichone == "Test 2") {
    document.getElementById("refi_purp").style.display = "none";
  }
}

<table width="100%" bordercolor="#000033">
  <tr>
    <td style="padding-left:30px">Drop Down 1</td>
    <td style="width:180px"><label name="h_sLoanPurp_err" include="yes"></label>
      <select id="h_sLoanPurp" NAME="h_sLoanPurp" onchange="RefiPurpose(this.value)" include="yes">
        <option>Please Choose One</option>
        <option value="Test 1">Test 1</option>
        <option value="Test 2">Test 2</option>
      </select>
    </td>
  </tr>
  <tr id="refi_purp">
    <td style="padding-left:30px" id="refi_purp_td">Drop Down 2:</td>
    <td><label name="h_refipurp_err" include="yes"></label>
      <select id="h_refipurp" NAME="h_refipurp" tabindex="60" include="yes" style="width: 170px"></select>
    </td>
  </tr>
</table>

Answer 1

为了使其恢复到原始位置，您应将行的display值设置为table-row，因为这是原始显示值。另外请注意，您的第一个选择没有价值。正如您可以阅读的here一样，您的第一个选项的值将为"Please Choose One"的值""。

[此外，正如我所说的那样，内联样式也不是一个好习惯。并且使用类更好，更容易地做到这一点。

所以我会建议这样的事情：

function RefiPurpose(whichone) {
  if (whichone == "Test 1" || whichone == "") {
    document.getElementById("refi_purp").className -= " no-display";
  } else if (whichone == "Test 2") {
    document.getElementById("refi_purp").className += " no-display";
  }
}

.no-display {
  display: none;
 }

<table width="100%" bordercolor="#000033">
  <tr>
    <td style="padding-left:30px">Drop Down 1</td>
    <td style="width:180px"><label name="h_sLoanPurp_err" include="yes"></label>
      <select id="h_sLoanPurp" NAME="h_sLoanPurp" onchange="RefiPurpose(this.value)" include="yes">
        <option value="">Please Choose One</option>
        <option value="Test 1">Test 1</option>
        <option value="Test 2">Test 2</option>
      </select>
    </td>
  </tr>
  <tr id="refi_purp">
    <td style="padding-left:30px" id="refi_purp_td">Drop Down 2:</td>
    <td><label name="h_refipurp_err" include="yes"></label>
      <select id="h_refipurp" NAME="h_refipurp" tabindex="60" include="yes" style="width: 170px"></select>
    </td>
  </tr>
</table>

但是，如果您确实想保留内联样式，则也可以将示例代码中第一个if内的代码替换为。 document.getElementById("refi_purp").style.display = "table-row";，并给第一个选项value=""，它应该可以工作。