下拉/选择框内的菜单树

Question

有没有办法在下拉/选择框中包含树形菜单。我有类似的类别列表

<ul id="example">
<li>Category1
    <ul>
        <li><a href="http://www.autisticcuckoo.net">Category1 subcat1</a></li>
        <li><a href="http://www.zeldman.com">Category1 subcat2</a></li>
        <li><a href="http://www.meyerweb.com">Category1 subcat3</a></li>
    </ul>
</li>
<li>Other Sites
    <ul>
        <li><a href="http://www.accessify.com/">Category2</a></li>
        <li><a href="http://www.w3.org/">Category3</a>
            <ul>
                <li><a href="http://validator.w3.org/">Category3 subcat1</a></li>
                <li><a href="http://jigsaw.w3.org/css-validator/">Category3 subcat2</a></li>
                <li><a href="http://www.w3.org/TR/WAI-WEBCONTENT/">Category3 subcat3</a></li>
            </ul>
        </li>
    </ul>
</li>

我想要我的类别列表，如树形菜单。 http://mackpexton.com/projects/TreeMenu/index.htm 现在正在使用选择的 jquery 来显示选择框。有没有办法做到这一点？

Answer 1

你把事情复杂化了。为什么有人想在选择列表中包含分层菜单。选择列表旨在显示项目列表。你怎么知道你从树形菜单中选择了哪个项目。 （我的意思是你怎么知道选定的项目路径）。

如果你能找到一个例子（用法），也许可以帮助你。

我上传了一张图片..这是你想要实现的目标

这就是所谓的树形菜单。

第二张图片来自 jquery 选择的站点。如果这是你想要的

您可以轻松实现这一点。

<select>
        <optgroup label="fruits">
            <option>Apple</option>
            <option>Apple</option>
            <option>Apple</option>
        </optgroup>
        <optgroup label="fruits">
            <option>Apple</option>
            <option>Apple</option>
            <option>Apple</option>
        </optgroup>
        <optgroup label="fruits">
            <option>Apple</option>
            <option>Apple</option>
            <option>Apple</option>
        </optgroup>
    </select>

Answer 2

您不能在选择框内执行此操作。不过，你可以伪造它。创建一个带有选择框和您的 ul 列表和按钮的容器，单击时将显示它。然后单击列表中的任何项目后，您应该将单击的项目映射到选择框中的特定项目并更新触发下拉菜单的可见按钮的值。