如何使选择在JS中一个接一个出现？

Question

我是 JS 新手，我需要一些帮助。我希望我的第二个选择仅在第一个已被选择的情况下出现，第三个选择在第二个选择完成后出现，提交按钮在第三个选择完成后出现。是否可以使用一个循环？

    <style>
      select{float:left}
       #month,#day,input{display:none} 
  </style>


  <select required id='year' class='selectOption' onchange='select(this)'>
      <option value=""> Select year</option>
      <option value="">2016</option>
      <option value="">2015</option>
      <option value="">2014</option>
      <option value="">2013</option>
      <option value="">2012</option>
      <option value="">2011</option>
      <option value="">2010</option>
      <option value="">2009</option>
      <option value="">2008</option>
      <option value="">2007</option>


    </select>
    <select required id='month' class='selectOption' onchange='select(this)'>
      <option value=""> Select month</option>
      <option value="">January</option>
      <option value="">February</option>
      <option value="">March</option>
      <option value="">April</option>
      <option value="">May</option>
      <option value="">June</option>
      <option value="">July</option>
      <option value="">August</option>
      <option value="">September</option>
      <option value="">October</option>
      <option value="">November</option>
      <option value="">December</option>
    </select>
    <select required id='day' class='selectOption' onchange='select(this)'>
      <option value="">Select Day</option>
      <option value="">1</option>
      <option value="">2</option>
      <option value="">3</option>
      <option value="">4</option>
      <option value="">5</option>
      <option value="">6</option>
      <option value="">7</option>
      <option value="">8</option>
      <option value="">9</option>
      <option value="">10</option>
      <option value="">11</option>
      <option value="">12</option>
      <option value="">13</option>
      <option value="">14</option>
      <option value="">15</option>
      <option value="">16</option>
      <option value="">17</option>
      <option value="">18</option>
      <option value="">19</option>
      <option value="">20</option>
      <option value="">21</option>
      <option value="">22</option>
      <option value="">23</option>
      <option value="">24</option>
      <option value="">25</option>
      <option value="">26</option>
      <option value="">27</option>
      <option value="">28</option>
      <option value="">29</option>
      <option value="">30</option>
      <option value="">31</option>
    </select>

    <input type="submit" class='selectOption'> 

   </form>

 function select(par) {
    var i = 0;
     var x = document.getElementsByClassName('selectOption');
      if (par.selectedIndex !== "0" && i<x.length) {
        x[i++].style.display = 'block';    
       } 
  }

 </script>

Answer 1

您可以通过在页面加载时隐藏除第一个选择之外的所有选择并在选择上一个选择后逐个显示它们来实现此目的。

 <select required id='month' class='selectOption hide' onchange='select(this)'>

 <select required id='day' class='selectOption hide' onchange='select(this)'>

plunker：http://plnkr.co/edit/oKwq0q4IB5poKuUOa6oG?p=preview

像这样定义你的函数。

function select(par) {
  if (par.selectedIndex !== 0) {
    par.nextElementSibling.className = "selectOption";
   } 
}