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

Question

我想实现以下下拉列表系统：

我知道下拉列表是使用<select>语句实现的。但是，我不确定是否需要使用 Javascript 命令来处理图片中列出的要求。你会建议如何处理这个问题？

提前致谢！

Answer 1

我认为如果您只想允许用户根据第一个选项中的选择事件选择第二个和第三个选项，您可能需要 JavaScript 来执行此操作。如果您必须为禁用 JavaScript 的用户提供服务，您将必须有一个更新按钮之类的东西，该按钮发布到服务器，其中 ASP.Net / PHP / Django / Node.js 中的服务器端代码或类似的东西，构建第二个和第三个选项并将它们返回给用户。

Answer 2

您可以将第二个和第三个下拉列表放在divs 中，并最初将它们隐藏。选择第一个的值后，使第二个可见，依此类推。您可以使用 javascript 轻松完成此操作。例如：

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

并在 div 中创建选择body：

<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>sinnerHTML中：

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>最后，在选择第一个特定选项时使它们可见：

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

Answer 3

您将在页面上拥有所有三个下拉菜单，但下拉菜单 2 和 3 将被隐藏。在更改第一个下拉菜单时，您必须检查第一个下拉菜单的值并显示第二个和第三个下拉菜单。演示可在此处获得

在 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();
    }
}
);
​