实现这个多级下拉列表最简单的方法是什么？

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