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

Question

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

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

提前致谢！

Answer 1

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

Answer 2

您可以将第二个和第三个下拉列表放在div内，并最初隐藏它们。选择first的值后，将第二个值设为可见，依此类推。您可以使用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>添加到<select>的{​​{1}}作为：

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>

Answer 3

您将在页面上全部三个下拉，但下拉2和3将被隐藏。在第一次下拉的更改时，您必须检查第一次下拉的值并显示第二次和第三次下拉。演示可用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();
    }
}
);
​