Question

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

这个想法是，在选择“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>

Answer 1

您的问题是您有两个具有相同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时发现了一些问题：

具有相同ID的多个元素。

在你的javascript中，它试图获得tipopago和mpcobro元素，元素在哪里？

我认为这部分：

document.getElementById('otrosban').style.display = '';

应该是：

document.getElementById('otroban').style.display = '';

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

1 个答案: