删除选项和optgroup之间的空间

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

<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或类似的东西

来源

2017-07-03 Abdullah Danyal

optgroups应该有标签虽然 - 在这种情况下，''optgroup label =“Category 1”>'...为什么你把类别名称作为单独的选项？ –

它是我的项目需求，我只是使用随机名称。用户也可以选择类别，如果我们将类别作为optgroup的标签，则不能选择类别。尝试回答解决方案而不是建议其他事情。谢谢 –

@AbdullahDanyal我已经给出了一些链接来选择插件，可以满足您的要求，并有更多的功能，如搜索。但是在默认的选择控制下，你无法达到你想要的目的。所以使用插件，而不是使用默认的选择控制 –

其实你正在设置组标题<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 Select Plugin

来源

2017-07-03 11:13:29

-1

你也可以考虑这样一个愚蠢的解决方案。它的好处是 - 它很简单，它的工作原理。缺点是：有些人可能会说这是一种不好的做法，如果您出于某种原因绝对需要它们，则不会涉及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>

来源

2017-07-03 11:23:12 evilkos

我认为这不是理想的解决方案。这不是使用这样的好习惯。 –

' '可能会更好地创建一个“假”缩进。 –

@NiettheDarkAbsol哇，你是对的，不知道' ' – evilkos

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

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

来源

2017-07-03 11:31:11

添加到您的样式表，这里我们强制更新SumoSelect CSS，如果你没有使用标签。这很适合。

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

来源

2018-02-08 05:54:31 insaneray

删除选项和optgroup之间的空间

回答

相关问题