實現這個多級下拉列表最簡單的方法是什麼？

Question

我想要實現下拉列表的以下系統：

我知道，下拉列表使用<select>語句來實現。但是，我不確定是否需要使用Javascript命令來處理圖片中列出的要求。你會如何處理這個問題？

在此先感謝！

Answer 1

您將有所有三個下拉頁面，但下拉2和3將隱藏。在第一次下拉的變化時，您將不得不檢查第一次下拉的值並顯示第二次和第三次下拉。 Demo可以here

在HTML中，我們定義了三個下拉菜單首先是可見的，第二個和第三個被隱藏。從第一個下拉列表中選擇3時，我們將顯示隱藏的下拉列表

<select id="sel1" >  
    <option > 1 </option> 
    <option > 2 </option> 
    <option > 3 </option> 
</select> 

<select id="sel2" style="display:none" > 
    <option > 1 </option> 
    <option > 2 </option> 
    <option > 3 </option> 
</select> 

<select id="sel3" style="display:none" > 
    <option > 1 </option> 
    <option > 2 </option> 
    <option > 3 </option> 
</select> 

​In javascript we have show the hidden dropdowns when 3 is selected from first drop down 

$('#sel1').change(function() 
{ 
    if($(this).val() == "3") 
    { 

     $('#sel2').show(); 
     $('#sel3').show(); 
    } 
} 
); 
​ 

Answer 2

我覺得如果你希望只允許用戶選擇基於第一選項選擇事件的第二和第三個選項，你可能會需要JavaScript來做到這一點。如果你有迎合禁用JavaScript的用戶，您將不得不做的東西像一個更新的按鈕，發送到服務器，其中在ASP.Net/PHP/Django的/ Node.js的或類似的東西服務器端代碼，構建第二和第三選項並將它們返回給用戶。

Answer 3

您可以將第二個和第三個下拉菜單放在div的內部，並最初隱藏它們。一旦選擇了第一個值，使第二個可見等等。你可以很容易地用JavaScript來做到這一點。對於如：

function onLoad() { 
document.getElementById("dayDropDownDiv").style.visibility="hidden"; 
} 

，並創建在body作爲DIV中的選擇：

<div id="dayDropDownDiv"> 
    <label for="select-Day" class="select">Day:</label> 
    <select name="select-day" id="dayDropDown" onchange="dayChange(this)"></select> 
</div> 

您也可以在JavaScript編程方式創建的下拉菜單。你必須在<option> s添加到該<select>的innerHTML爲：

function addValues() { 
    var dayOptionsList = ""; 

for(loopIndex=1;loopIndex<=31;loopIndex++){ 
     dayOptionsList = dayOptionsList+"<option>"+loopIndex+"</option>";//<-this will create an options list for days 
    var daySelector = document.getElementById("dayDropDown"); 
    daySelector.innerHTML = dayOptionsList;//done 
} 

最後，使其可見，當第一<select>「選中S特定選項：

function firstValueSelected(resultsObj){ 
    var val = obj.options[obj.selectedIndex].text;//<- text of selected option 
    if(val=="f") 
     document.getElementById("dayDropDownDiv").style.visibility="visible"; 
}