Question

我有一个选择下拉列表，其中有一些选项和optgroup。我不想使用optgroup的标签。如果我将其设置为空或不提及作为optgroup的属性，我只看到optgroup和option元素之间的空格。有没有办法删除它？这是一个jsfiddle。

<select>
    <option>Category 1</option>
    <optgroup>
        <option>a</option>
        <option>b</option>
    </optgroup>
    <option>Category 2</option>
     <optgroup>
        <option>c</option>
        <option>d</option>
    </optgroup>
</select>

我想删除“类别1”和“a”，“类别2”和“c”之间的空格。

注意：我使用随机名称下拉列表，它们在我的项目中有所不同，用户也可以选择类别。如果我们将类别作为标签，那么我们无法进一步选择它。所以解决方案应该是改变css或类似的东西

Answer 1

实际上，您在<option>标记中设置了组标题。所以你必须改变你的代码，如下所示：

<select>
   <optgroup label="Category 1">
       <option>a</option>
       <option>b</option>
   </optgroup>
   <optgroup label="Category 2">
       <option>c</option>
       <option>d</option>
   </optgroup>
</select>

如果你想根据你设计这个样式，你应该使用一些基于jquery的选择插件

选择：Chosen plugin

Bootstrap选择：Bootstrap Select Plugin

Answer 2

如果您希望能够选择一个类别，我会建议如下：

<select>
  <option>-- please select --
  <optgroup label="Category 1">
    <option>All
    <option>a
    <option>b
  <optgroup label="Category 2">
    <option>All
    <option>c
    <option>d
</select>

Answer 3

将此添加到样式表中，我们强行更新SumoSelect CSS，如果您没有使用标签。这很合适。

.SumoSelect > .optWrapper > .options li.group > label{padding: 0px 0px !important;}

Answer 4

你也可以考虑这样一个愚蠢的解决方案。它的好处是 - 它很简单而且很有效。缺点是：有些人可能称之为不良做法，如果您出于某种原因绝对需要它们，则不涉及optgroups。

<select>
    <option>Category 1</option>
    <option>&emsp;a</option>
    <option>&emsp;b</option>
    <option>Category 2</option>
    <option>&emsp;a</option>
    <option>&emsp;b</option>
</select>

删除选项和optgroup之间的空格

4 个答案: