如何讓選擇在JS中一個接一個出現？

我是新來的JS，我需要一些幫助。我希望我的第二個選擇僅在第一個選擇已經被選中時出現，第三個選擇在第二個選擇完成後出現並且提交按鈕在第三個選擇完成後出現。是否可以使用一個循環？如何讓選擇在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>

來源

2016-07-07 Armine

下拉列表取決於每個列表稱爲級聯下拉列表。你應該能夠找到大量的資源和關於如何尋找這個術語的教程。關於可見性，將css可見性設置爲隱藏或可見將會成功。（Display：none; Display block; would work as well） – seN

[顯示隱藏基於Jquery或Javascript中的前一個選擇下拉選擇選項]的可能副本（http://stackoverflow.com/questions/21579532/show-hide-select -options基於-上以前選擇-下拉式-jquery的有或Java類） – dippas

您可以通過隱藏所有的選擇，但在頁面加載的第一個和選擇前選擇後一個顯示他們一個實現這一目標。

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

來源

2016-07-07 18:00:42 Deep

如何讓選擇在JS中一個接一個出現？

回答

相關問題