[英]How do I make a multi-level dropdown menu work on a touchscreen device using css or javascript?
[英]How to make multi level dropdown menu using select option mentod
我想使用 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>
据我从您的“多级下拉”概念中了解,您可以制作一个简单的下拉菜单,只需移动一些带有 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/
您不能使用select
元素创建多个级别。
在这种情况下,您将创建一个自定义组件,该组件能够显示类似“分层”的内容。
或者使用这样的技巧:
<select> <option>select me</option> <option> me indented</option> <option> even more indentation</option> </select>
如果你想使用一个 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>
您不能使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.