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

Question

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

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

- Bobby

---

你是想创建某种导航还是试图在表单中使用“this”？ - Thomas Wikman

只是尝试制作选择下拉菜单。 - Bobby

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

- Arkadiusz Raszeja

---

HTML不允许嵌套<optgroup>: https://html.spec.whatwg.org/multipage/form-elements.html#the-optgroup-element - 根据规范，此代码是无效的。 - ericek111

Answer 2

如果您想使用一个选择器，可以使用<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>

- Thomas Wikman

---

非常快，是的我明白了，我们能否像这样隐藏子标题部分：如ssc、railway，并使它们在点击时显示。 - Bobby

由于select/option/optgroup几乎无法进行样式设置，我甚至不会考虑使用select来实现你想要的功能。我会使用vanillajs处理逻辑，并使用适当的HTML/CSS进行呈现。如果你从数据的呈现方式（它应该是什么样子）开始，你会发现在特定元素被点击时执行操作非常容易。 - Thomas Wikman

Answer 3

使用 select 元素无法创建多级菜单。

在这种情况下，您可以创建一个自定义组件，具有显示“分层”的能力。

或者使用以下技巧：

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

- john

Answer 4

使用select元素无法创建多级菜单。

不过，如果有帮助的话，这里有

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

- Ben

Answer 5

也许这可以激发你的灵感，即使编辑们没有完全正确地解释它。

    <div class="col-2 search-filter">          
      <select id="searchByYear"  multiple="multiple"  ng-model="varYear.value">
        <option value="2023">2023
          <option value="2023-H1">H1</option>
          <option value="2023-H2">H2</option>
        </option>
        <option value="2022">2022
          <option value="2022-H1">H1</option>
          <option value="2022-H2">H2</option>
        </option>
        <option value="2021">2021
          <option value="2021-H1">H1</option>
          <option value="2021-H2">H2</option>
        </option>
        <option value="2020">2020
          <option value="2020-H1">H1</option>
          <option value="2020-H2">H2</option>
        </option>
        <option value="2019">2019
          <option value="2019-H1" >H1</option>
          <option value="2019-H2" >H2</option>
        </option>
     </select>       
    </div>      

- kStarbe