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

Question

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

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

提前致谢!

Answer 1

您将在页面上看到所有三个下拉列表，但下拉列表 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();
    }
}
);
​