根据下拉选择隐藏四个输入框

Question

我想隐藏四个输入框。 当我使用if而else只隐藏两个盒子。 我的代码是常规JavaScript，但我会接受jQuery解决方案。

window.onload = function() { 
    var select = document.getElementById("billing_type"); 
    select.onchange = function() { 
        if (select.value == "2") {
            document.getElementById("secondpuppytable").style.display = "inline"; 
        }
        else if (select.value == "3") {
            document.getElementById("thirdtable").style.display = "inline"; 
        }
        else{ 
            document.getElementById("firsttable").style.display = "none"; 
        } 
    } 
}

Answer 1

如果我理解正确，你就会遇到“状态”问题。 当所选选项发生更改时，表的状态（要显示的表）应该更改。

您可以像这样实现它：（HTML）

<select id="billing_type">
  <option value="0">1</option>
  <option value="1">2</option>
  <option value="2">3</option>
</select>
<div id="firsttable">firsttable</div>
<div id="secondpuppytable" style="display:none">secondpuppytable</div>
<div id="thirdtable" style="display:none">thirdtable</div>

使用Javascript：

window.onload = function() { 
  function tableSwitcher(tables) {
    this.tables = tables;
    this.activeTable = tables[0];
  }
  tableSwitcher.prototype.setActiveTable = function (i) {
    this.activeTable.style.display = "none";
    this.activeTable = this.tables[i];
    this.activeTable.style.display = "inline";
  }

  var select = document.getElementById("billing_type"); 
  var tables = [
    document.getElementById("firsttable"),
    document.getElementById("secondpuppytable"),
    document.getElementById("thirdtable")
  ];

  var switcher = new tableSwitcher(tables);   
  select.onchange = function() { 
    switcher.setActiveTable(select.value);
  }; 
}

希望这可以帮助！