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);
  }; 
}

希望这有帮助！

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

1 个答案: