在一个下拉选择中显示类别和子类别答案

【问题标题】：displaying category and subcategories in one drop down select在一个下拉选择中显示类别和子类别
【发布时间】：2015-06-25 13:17:12
【问题描述】：

我正在尝试创建一个这样的选择（它是一个下拉选择输入）：

您可以看到SELECT OPENS何时显示主要类别，通过单击每个类别，将显示子类别。您也可以点击勾选来选择当前类别和子类别。此外，当显示一个类别的子类别时，顶部有两个项目。一个是勾号，另一个是回来的，点击它，您可以再次看到主要类别。

如何创建这样的选择？

提前致谢

【问题讨论】：

你在主ul的每个li中构建ul
在标准的<select> 中无法做到这一点，在选择列表中最接近的代表是<optgroup>：developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
@Jon 有一个网站已经做到了。地址是这个“divar.ir”。它在搜索部分。
我发现它正在使用 selected-master 。但是对此进行了一些更改。

标签： javascript jquery html drop-down-menu

【解决方案1】：

这是 html 部分，您可以使用它来创建菜单和子菜单。

<body class="no-js">
    <nav id="topNav">
            <ul>
                <li><a href="#" title="Nav Link 1">Nav Link 1</a></li>
            <li>
                <a href="#" title="Nav Link 1">Nav Link 2</a>
                <ul>  
                    <li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>
                    <li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>
                    <li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>
                    <li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>
                    <li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>
                </ul>                
            </li>
            <li><a href="#" title="Nav Link 1">Nav Link 3</a></li>
            <li><a href="#" title="Nav Link 1">Nav Link 4</a></li>
            <li><a href="#" title="Nav Link 1">Nav Link 5</a></li>
        </ul>
    </nav>
</body>

【讨论】：

@Avanish 我想让它在下拉菜单中选择而不仅仅是一个菜单
可以通过创建嵌套使用