<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>
<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>
<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/
<optgroup>
: https://html.spec.whatwg.org/multipage/form-elements.html#the-optgroup-element - 根据规范,此代码是无效的。 - ericek111如果您想使用一个选择器,可以使用<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>
使用 select
元素无法创建多级菜单。
在这种情况下,您可以创建一个自定义组件,具有显示“分层”的能力。
或者使用以下技巧:
<select>
<option>select me</option>
<option> me indented</option>
<option> even more indentation</option>
</select>
使用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>
也许这可以激发你的灵感,即使编辑们没有完全正确地解释它。
<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>