如何在下拉列表中添加分隔符？

在下拉列表中添加分隔符可以通过以下几种方式实现：

使用optgroup标签：optgroup标签可以创建一个分组，将相关选项放入该分组中。可以通过设置label属性来定义分组的名称。例如：

<select>
  <optgroup label="水果">
    <option>苹果</option>
    <option>香蕉</option>
    <option>橙子</option>
  </optgroup>
  <optgroup label="蔬菜">
    <option>西红柿</option>
    <option>胡萝卜</option>
    <option>黄瓜</option>
  </optgroup>
</select>

上述代码将会在下拉列表中创建两个分组，一个是"水果"，一个是"蔬菜"，相关选项会分别放入对应的分组中。

使用disabled属性：可以通过将某个选项设置为禁用状态，以此达到分隔的效果。例如：

<select>
  <option>苹果</option>
  <option disabled>---------</option>
  <option>香蕉</option>
  <option>橙子</option>
  <option disabled>---------</option>
  <option>西红柿</option>
  <option>胡萝卜</option>
  <option>黄瓜</option>
</select>

上述代码中，通过将某些选项设置为禁用状态，并在其文本中添加分隔符"---------"，实现了在下拉列表中添加分隔符的效果。

使用CSS样式：可以通过CSS样式为选项添加样式，使其看起来像是分隔符。例如：

<select>
  <option>苹果</option>
  <option class="separator"></option>
  <option>香蕉</option>
  <option>橙子</option>
  <option class="separator"></option>
  <option>西红柿</option>
  <option>胡萝卜</option>
  <option>黄瓜</option>
</select>

.option.separator {
  border-top: 1px solid black;
  background-color: gray;
  height: 1px;
}

上述代码中，通过为特定的选项添加样式类"separator"，并使用CSS样式设置边框、背景色等属性，实现了在下拉列表中添加分隔符的效果。

腾讯云提供的相关产品和产品介绍链接如下：

腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
腾讯云SCF（云函数）：https://cloud.tencent.com/product/scf
腾讯云CLS（日志服务）：https://cloud.tencent.com/product/cls
腾讯云CVM（云服务器）：https://cloud.tencent.com/product/cvm

以上是关于如何在下拉列表中添加分隔符的解答。

动态浮点宽度的获取

、、、

我正在构建一个动态下拉导航。 }

浏览 4提问于2011-07-01得票数 3

回答已采纳

3回答

从下拉列表中选择多个值

、、、、

如何从下拉列表中选择多个值?当选择该值时，它将在下拉菜单中不再可用。[ 我希望能够一次选择多个电子邮件地址，方法是按下我想用逗号分隔符显示的“添加”按钮，所以当我们通过下拉列表选择一个电子邮件地址时，它将自动显示在“to”输入字段中，例如: neymar@gmail.com、ronaldo@gmail.com、messi@gmail.com，然后用户也可以通过按“删除”按钮删除输入中<

浏览 2提问于2018-07-08得票数 0

回答已采纳

1回答

如何在Android的下拉列表中添加节/头？

、、、、

在搜索对象时，我希望有某种类型的分隔符或标题来对将显示在下拉列表中的对象进行分类。我试着搜索一些例子，但都没有用。至少，我只需要一个关于如何做到这一点的顶级指导。一些代码示例会很好。到目前为止，对于下拉列表中的对象行，我有一个定制的xml布局。但不确定如何添加标头/节。

浏览 4提问于2015-08-12得票数 1

回答已采纳

1回答

如何在outlook命令栏上的控件之间创建垂直分隔符？

、、、、

我正在创建一个outlook 2003加载项，它在打开的每个邮件项上添加一些下拉列表和按钮。我已经创建了一个命令栏，并已将控件添加到该命令栏中。但是，如果我看一下邮件消息的标准工具栏，每个按钮都由一个竖条分隔，但在我的工具栏中没有分隔符。如何在命令栏上的控件之间创建垂直分隔符。我使用VSTO2005SE和C#进行开发。

浏览 5提问于2008-12-20得票数 2

回答已采纳

3回答

可变大小的所有者绘制ComboBox；列出未正确调整大小的列表

、、、

我从ComboBox派生了一个类，使其成为所有者绘制的列表框(DrawMode.OwnerDrawVariable样式)，通过重写OnMeasureItem和OnDrawItem，我向下拉列表(例如分隔符)中添加了比位于控件中的常规项更小/更大的特殊项。现在，我遇到的问题(似乎无法有效地解决)是下拉列表的大小:当列表下降时，列表末尾有一个难看的空空间。有时，在随机项目数上

浏览 1提问于2009-12-27得票数 5

回答已采纳

1回答

带分离器的VSTO带状ComboBox (MenuSeparator)

、、

字体允许有图标和分隔符：我设法在下拉菜单上设置了图像(标准功能)，但是我找不到任何关于如何创建分隔符的参考。DynamicMenu具有添加分隔符的能力，但不允许用户键入并具有像combobox控件中的自动提示功能。我需要这个功能，因为列表会很长。有没有人知道如何做这个功能，或指向我的博客，其中建议如何做到这一点？如果这是不可能的，是否有人知道如何创建自定义控件来允许我自己完成这些功能？特

浏览 0提问于2016-03-24得票数 2

回答已采纳

1回答

#杂注标记文本字段委托

、、

这个#杂注标记文本字段委托是什么？

浏览 0提问于2010-10-18得票数 6

回答已采纳

0回答

使Bootstrap导航栏下拉菜单的一部分可滚动

、、、

我的Bootstrap导航栏中有一个下拉菜单，可能会有一个很长的项目列表，所以它应该是可滚动的。在列表的末尾，我有一个分隔符和一个"Add a new item“条目。我想保持此项目列表可滚动，但我希望分隔符和“添加新项目”条目固定在菜单的底部。这样，用户就可以添加内容，而不必一直滚动到底部。此外，如果列表太长，用户可能不知道该选项，因为它将隐藏在底部。

浏览 3提问于2016-07-15得票数 0

1回答

我们是否可以允许用户在react应用程序中除了已经存在的下拉列表之外插入一个下拉选项？

、、

在构建react应用程序时，我希望在应用程序中启用一个功能，以允许用户在下拉列表中添加新值。是否可以在应用程序中添加此功能？添加以下示例import { MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem</MDBDropdownI

浏览 0提问于2020-05-22得票数 0

1回答

选择所有选择的id在一个多选择的下拉列表中，在laravel 5.4中，选择收获量

、、

我有一个名为“指定”的下拉列表，在这个下拉列表中，用户可以添加一些针对多个指定的信息。如果我在3项指定中添加了1条记录，那么我需要在验证和编辑时间内选择这些记录。'selected' : ''}} />{{ $value }}</option></select> 在添加这些信

浏览 3提问于2017-06-05得票数 0

回答已采纳

1回答

在基础的_settings.scss中放置下拉列表的分隔符/行

、

昨天，我在玩_settings.scss文件时，不小心在下拉列表的值之间添加了一个分隔符(一条像素线)。今天，我找不到它在哪里。

浏览 1提问于2015-04-23得票数 0

1回答

菜单分隔条

、

根据我的教科书，如果我右键单击一个现有的菜单项并转到下拉菜单的插入部分，那么应该有一个添加分隔栏的选项。但是，当我要这样做时，只有选项可以插入菜单项、组合框或文本框。

浏览 3提问于2020-04-19得票数 1

回答已采纳

1回答

限制ASP.net下拉

、

我必须限制ASP.NET中某些下拉框的内容。ID Text2 Some more text4 This因此，如果没有在LINQ中硬编码，我会更好地为每个下拉框创建另一个表，以及我想显示的in吗？我不确定最好的

浏览 2提问于2014-10-01得票数 2

回答已采纳

1回答

Angular ngswitch带来意想不到的结果

、

现在我将一个键交给我的Dropdown组件，其中Map<string, string>是我想要在下拉列表中显示为项目的内容，value是我想要导航到的url。这实际上工作得很好。ngx-bootstrap DropDown可以让你在下拉列表中放置一个分隔符来分隔某些下拉项。要指定分隔符应该出现的位置，我想我可以简单地传递一个键值，就像['dropDownDivider', '']一样，然后使用ngSw

浏览 24提问于2019-08-29得票数 0

回答已采纳

2回答

Flex Spark DropDownList -在项目之间添加分隔符

、、、

我正在尝试创建一个下拉列表，可以显示客户的过去状态和可能的状态。实际上，我在dataprovider上添加了一个类似“-”的项。我的理想方法是这样的：如有任何建议，我们将不胜感激！

浏览 0提问于2012-01-21得票数 1

1回答

如何将其他数据绑定到Telerik Kendo下拉列表

、、、、

我有一份Kendo下拉列表。它是以一个位置名称作为文本和一个位置ID作为值设置的。但是，我还有第三个字段需要绑定到模型(或者至少以某种方式返回到我的控制器)。是否有方法绑定其他数据？我看到了一些地方，可以通过模板在下拉框中显示更多的数据，但是我没有找到将附加值传递回控制器的任何示例。下拉框使用的模型有以下字段：当前，origLocationName是显示在下拉列表

浏览 2提问于2016-02-23得票数 1

1回答

在Flex组合框中添加水平分隔符和自动完成功能

、

我想做以下几点，但无法做到：请有人给我提供一些示例代码或指导，以实现上述目标。

浏览 0提问于2012-09-17得票数 0

1回答

需要创建下拉列表分隔符

、、、

我需要创建一个分隔符列表，最终需要在下拉列表中填充。列表应该包含以下字符： }; }我们如何</

浏览 2提问于2015-12-02得票数 0

回答已采纳

1回答