javascript - 如何使用选择选项方法制作多级下拉菜单

标签 javascript html css web

我想用select和option方法制作多级下拉菜单

<select>
   <option value="" data-display-text="Select">None</option>
   <option value="oranges">SSC</option>
   <option value="oranges">GATE</option>
   <option value="bananas">BANK PO</option>
   <option value="bananas">RAILWAY</option>
 </select>

最佳答案

据我对“多级下拉”概念的理解,您可以制作一个简单的下拉菜单,只需使用 CSS 移动一些元素。类别名称存储在 optgroup 中。

<select name="select_projects" id="select_projects">
        <option value="">project.xml</option>
        <optgroup label="client1">
            <option value="">project2.xml</option>
        </optgroup>
        <optgroup label="client2">
            <option value="">project5.xml</option>
            <option value="">project6.xml</option>
            <optgroup label="client2_a">
                <option value="" style="margin-left:23px;">project7.xml</option>
                <option value="" style="margin-left:23px;">project8.xml</option>
            </optgroup>
            <option value="">project3.xml</option>
            <option value="">project4.xml</option>
       </optgroup>
       <option value="">project0.xml</option>
       <option value="">project1.xml</option>
    </select>

更新:
或者,如果您正在尝试像在 Windows 的开始菜单中那样制作下拉列表“链”,这是最简单的方法:
https://jqueryui.com/menu/

关于javascript - 如何使用选择选项方法制作多级下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44367357/

相关文章:

c# - 时区策略

javascript - 右对齐 Highcharts 栏

html - 我如何 'freeze' block 级元素?

html - 如何阻止移动 CSS 被主 CSS 覆盖

javascript - 为什么 html5 全屏不能与 window.history.pushState 一起使用?

javascript - 在纯 JavaScript 中聚焦特定文本区域时选择文本并复制到剪贴板?

javascript - 删除一列的重复单元格:html

JQuery根据元素的高度添加类

css - 如何设计我的表单样式以便多个输入位于一行中?

jquery - 幻灯片后,保持位置