Javascript 如何将HTML元素select更改为子菜单UI？

我想知道使用本机html元素select可以添加子菜单吗

过程 缺乏过程 不遵守程序 HTML

上面的代码只允许我定义子部分，但在父用户界面中没有单独的菜单用户界面？有没有办法改变这一点

---

谢谢

不，标准选择不允许使用子菜单，但有一些相当简单的jQuery解决方案使用无序列表

这些都是非常好/简单的解决方案：

---

我知道没有使用原生HTML，但是您可以使用jQuery来实现这一点

<Select id="cartype">
    <option value="Select">Select Car Type</option>
    <option value="Swedish Cars">Swedish Cars</option>
    <option value="German Cars">German Cars</option>
</Select>
<select id="carDetail">
    <option value="unset">Select Car Type First</option>
</select>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready( function () {
    $.fn.addOption = function(optText, optValue){
        var option = new Option(optText, optValue);
        return this.append(option);
        };
    $("#cartype").change(function() {
        $("#carDetail option").remove();
        switch ($("#cartype").val())
        {
        case "Swedish Cars":
            $("#carDetail").addOption("Volvo", "volvo");
            $("#carDetail").addOption("Saab", "saab");
            break;
        case "German Cars":
            $("#carDetail").addOption("Mercedes","mercedes");
            $("#carDetail").addOption("Audi","audi");
            break;
        default:
            $("#carDetail").addOption("Select Car Type First","unset");
        }
    });
});
</script>

---

这只是一个下拉列表！你不能再做了，所以试着用ul和li标签制作一个真正的菜单。当你在每个下拉列表中有20个元素时，它是不可伸缩的。重复的代码太多了。浏览器的支持如何？它会在所有的机器上运行吗？可能。你得测试一下。这是一件相当简单的事情，所以我想它将与所有现代浏览器兼容，可能至少会回到IE7或IE6，但IE6的市场份额已降至0.05%，而IE7的市场份额已降至0.1%，所以谢天谢地，我想我们终于可以停止支持它们了。

<Select id="cartype">
    <option value="Select">Select Car Type</option>
    <option value="Swedish Cars">Swedish Cars</option>
    <option value="German Cars">German Cars</option>
</Select>
<select id="carDetail">
    <option value="unset">Select Car Type First</option>
</select>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready( function () {
    $.fn.addOption = function(optText, optValue){
        var option = new Option(optText, optValue);
        return this.append(option);
        };
    $("#cartype").change(function() {
        $("#carDetail option").remove();
        switch ($("#cartype").val())
        {
        case "Swedish Cars":
            $("#carDetail").addOption("Volvo", "volvo");
            $("#carDetail").addOption("Saab", "saab");
            break;
        case "German Cars":
            $("#carDetail").addOption("Mercedes","mercedes");
            $("#carDetail").addOption("Audi","audi");
            break;
        default:
            $("#carDetail").addOption("Select Car Type First","unset");
        }
    });
});
</script>