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

如何让JS在JS中一个接一个地出现？

1 个答案: