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

【问题标题】：How to make multi level dropdown menu using select option mentod如何使用选择选项方法制作多级下拉菜单
【发布时间】：2017-11-06 03:12:09
【问题描述】：

我想使用选择和选项方法制作多级下拉菜单

<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>

【问题讨论】：

您是在尝试创建某种导航，还是尝试在表单中使用“this”？
只是想做出选择下拉菜单

标签： javascript html css web

【解决方案1】：

据我了解，从您的“多级下拉”概念中，您可以制作一个简单的下拉菜单并使用 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/

【讨论】：

HTML 不允许嵌套 <optgroup>s: html.spec.whatwg.org/multipage/… - 根据规范，此代码无效。

【解决方案2】：

如果您想使用 ONE select，您可以使用 <optgroup/>。见例子。注意：它不是非常多层次的，但它允许某种相关的分组。

<select>
  <option value="" selected="selected">Select an option...</option>
  <optgroup label="SSC">
    <option value="oranges1">some option</option>
    <option value="oranges2">some option</option>
    <option value="oranges3">some option</option>
  </optgroup>
  <optgroup label="GATE">
    <option value="bananas1">some option</option>
    <option value="bananas2">some option</option>
    <option value="bananas3">some option</option>
  </optgroup>
  <optgroup label="BANK PO">
    <option value="apples1">some option</option>
    <option value="apples2">some option</option>
    <option value="apples3">some option</option>
  </optgroup>
  <optgroup label="RAILWAY">
    <option value="grapes1">some option</option>
    <option value="grapes2">some option</option>
    <option value="grapes3">some option</option>
  </optgroup>
</select>

【讨论】：

这么快，是的，我明白了，我们可以让子标题部分像 ex: ssc、railway 一样隐藏，并让它们在点击时显示
因为 select/option/optgroup 或多或少没有样式，我什至不会考虑将 select 用于您打算使用它的目的。我会使用 vanillajs 作为逻辑和适用的 HTML/CSS 进行演示。如果您从数据的呈现（它应该看起来如何）开始，您会发现单击特定元素时“做”事情非常容易。

【解决方案3】：

您不能使用select 元素创建多个级别。

在这种情况下，您将创建一个能够显示类似“分层”的自定义组件。

或者使用这样的技巧：

<select>
    <option>select me</option>
    <option>&nbsp;me indented</option>
    <option>&nbsp;&nbsp;even more indentation</option>
</select>

【讨论】：

【解决方案4】：

您不能使用选择元素创建多个级别。

任何方法，如果有帮助的话，有

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

【讨论】：