隐藏/显示基于下拉菜单选择HTML的表格

Question

我试图隐藏下面的第二个表格，并在客户从顶部的下拉菜单中选择借记选项时显示。我对此比较陌生，所以非常感谢任何帮助！

＆＃13;

＆＃13;

<table width="723" height="75" border="2">
  <tbody>
    <tr>
      <th width="248" scope="col"><span style="font-size: 13px">Payment 
     Method:</span>
        <select>
      <option value=""></option>
      <option value="tracer ach credit">Credit</option>
      <option value="tracer ach debit">Debit</option>
    </select>&nbsp;</th>
    </tr>
  </tbody>
</table>
<br>
<table width="723" height="558" border="2">
  <tbody>
    <tr style="text-align: center; font-size: 13px;">
      <td height="40" colspan="2">
      </td>
    </tr>
    <tr>
      <td height="24" valign="top"><span style="font-size: 13px">Bank 
    Account:</span>&nbsp; &nbsp;
      </td>
      <td height="26"><textarea rows="1" cols="50"> 
              </textarea>&nbsp;</td>
      </td>
      <span style="text-align: center">
            </div>
            </span>

    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将id="table2"添加到您的表格中，然后CSS开始隐藏：

#table2 {
  visibility:hidden;
}

并在<select> ="ShowHide(this)"中添加ShowHide javascript每次更改选择调用function ShowHide(select){ var table2 = document.getElementById("table2"); if(select.value == "tracer ach debit"){ table2.style.visibility="visible"; }else{ table2.style.visibility="hidden"; } } 函数。

如果选择的选项是借记卡，则function ShowHide(select){ var table2 = document.getElementById("table2"); if(select.value == "tracer ach debit"){ table2.style.visibility="visible"; }else{ table2.style.visibility="hidden"; } }添加此功能以转换onchange表：

#table2 {
  visibility:hidden;
}

在线示例：

＆＃13;

＆＃13;

<table width="300" height="75" border="2">
  <tbody>
    <tr>
      <th scope="col">
        <span style="font-size: 13px">Payment Method:</span>
        <select id="select" onchange="ShowHide(this)">
          <option value=""></option>
          <option value="tracer ach credit">Credit</option>
          <option value="tracer ach debit">Debit</option>
        </select>
      </th>
    </tr>
  </tbody>
</table>
<br>
<table width="300" height="300" border="2" id="table2">
  <tbody>
    <tr>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td valign="top">
        <span style="font-size: 13px">Bank Account:</span>
      </td>
      <td>
        <textarea rows="1" cols="30"></textarea>
        <span></span>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

-N

＆＃13;

-N

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

function paymentChangeHandler(event) {
  var value = event.target.value;
  var bank = document.getElementById("bank_info");
  if (value.indexOf('debit') !== -1) {
    bank.style.visibility = "visible";
  } else {
    bank.style.visibility = "hidden";
  }
}

var selector = document.getElementById("payment_method");
selector.onchange = paymentChangeHandler;

＆＃13;

<table width="723" height="75" border="2">
  <tbody>
    <tr>
      <th width="248" scope="col"><span style="font-size: 13px">Payment 
     Method:</span>
        <select id="payment_method">
      <option value=""></option>
      <option value="tracer ach credit">Credit</option>
      <option value="tracer ach debit">Debit</option>
    </select>&nbsp;</th>
    </tr>
  </tbody>
</table>
<br>
<table width="723" height="558" border="2" id="bank_info" style="visibility:hidden;">
  <tbody>
    <tr style="text-align: center; font-size: 13px;">
      <td height="40" colspan="2">
      </td>
    </tr>
    <tr>
      <td height="24" valign="top"><span style="font-size: 13px">Bank 
    Account:</span>&nbsp; &nbsp;
      </td>
      <td height="26"><textarea rows="1" cols="50"> 
              </textarea>&nbsp;</td>
      <span style="text-align: center">
            </span>

    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

为付款方式下拉控件和银行表添加 ID＆＃39> ，并将样式可见性：隐藏添加到银行表格。