使用Javascript显示和隐藏几个字段

Show and hide several fields using Javascript

本文关键字：几个 字段 Javascript 显示 隐藏 使用      更新时间：2023-09-26

我正在尝试隐藏和显示几个选择和文本字段

这个想法是，在第一个字段中，当选择"Banco"时，它会显示一个下拉列表，供用户选择哪家银行，直到这一部分一切都很好，当在下一个"Banco"下拉列表中，人们选择"otros"时，问题就来了，它应该显示一个文本字段，供客户写下银行名称，但我已经做了所有的事情，似乎无法让它在上工作

你能帮我吗？？

这是JS

function formapago() {
if (document.getElementById('infopago').value == 'banco') {
    document.getElementById('banco').style.display = '';
    document.getElementById('tipopago').style.display='';
    }   
else {
          document.getElementById('banco').style.display = 'none';
          document.getElementById('tipopago').style.display='none';
}
if (document.getElementById('infopago').value == 'mp') {
    document.getElementById('mpcobro').style.display = '';
} else {
          document.getElementById('mpcobro').style.display = 'none';
}  
if (document.getElementById('banco').value == 'otros') {
    document.getElementById('otrosban').style.display = '';
    }   
else {
          document.getElementById('otrosban').style.display = 'none';
}

}

和HTLM

<select name="infopago" id="infopago" onchange='formapago()'>
          <option value="elegir" selected="selected">Elegir</option>
          <option value="banco">Banco</option>
          <option value="mp">Mercado Pago</option>
        </select>
        </p>
        <div id="banco" style="display: none">
      <p><strong>BANCO: </strong></p>
      <p>
        <label for="banco">Banco Emisor</label>
        <select name="banco" id="banco" onchange='formapago()'>
          <option value="elegir" selected="selected">Elegir</option>
          <option value="provincial">Provincial</option>
          <option value="mercantil">Mercantil</option>
          <option value="banesco">Banesco</option>
          <option value="venezuela">Venezuela</option>
          <option value="otros">Otro</option>
        </select>
      </p> </div>
      <div id="otroban" style="display: none">
      <p>
        <label for="otroban">Otro Banco</label>
        <input type="text" name="otroban" id="otroban"/>
      </p>
      </div>

您的问题是有两个ID相同的元素。

本部分：

  <div id="banco" style="display: none">
    <p><strong>BANCO: </strong></p>
    <p>
      <label for="banco">Banco Emisor</label>
      <select name="banco" id="banco" onchange='formapago()'>
       <option value="elegir" selected="selected">Elegir</option>
       <option value="provincial">Provincial</option>
       <option value="mercantil">Mercantil</option>
       <option value="banesco">Banesco</option>
       <option value="venezuela">Venezuela</option>
       <option value="otros">Otro</option>
       </select>
    </p> 
 </div>

div和select元素的id="banco"。尝试更改选择id。

编辑

当我看到你的HTML:时，我发现了一些问题

  1. 具有相同id的多个元素
  2. 在您的javascript中，它试图获取tipopago和mpcobro元素，元素在哪里
  3. 我认为这部分：
  document.getElementById('otrosban').style.display = '';

应为：

  document.getElementById('otroban').style.display = '';
相关文章：