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

【问题标题】：Hide four input boxes based on drop down selection根据下拉选择隐藏四个输入框
【发布时间】：2015-02-14 05:53:16
【问题描述】：

我想隐藏四个输入框。当我使用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"; 
        } 
    } 
}

【问题讨论】：

您已标记 jQuery，但您显示的代码是 vanilla js。您应该删除 jQuery 标记或在您的问题中明确声明您愿意接受 jQuery 解决方案。你的问题也很难理解，你能不能试着用措辞来表达，并添加更多关于你的预期结果和实际发生的细节。
我会先尝试在函数中隐藏所有内容，然后根据值显示需要的内容。

标签： javascript jquery html

【解决方案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);
  }; 
}

希望这会有所帮助！

【讨论】：