如何添加一个 CSS 类来选择选项？答案

【问题标题】：How to add a css class to select option?如何添加一个 CSS 类来选择选项？
【发布时间】：2014-09-09 10:02:15
【问题描述】：

我正在尝试将一些 CSS 类添加到我选择的特定选项中。

用attr将其添加到select本身是没有问题的：

'attr'=>array('style'=>'width:300px', 'class'=>'class'),

但我想将类添加到选项本身：

<select name="select">
   <option class="x" value="1">red</option>
   <option value="2">blue</option>
   <option class="y" value="3">green</option>
</select>

我还没有找到任何方法。我已经研究了 ChoiceType 和 ChoiceList 实现。

我最喜欢的方式是将它们添加到服务器端。

感谢任何提示。

【问题讨论】：

你想选择
不，他只是想为列表中的特定选项添加自定义类。
@Gagan 正如 Florian Peschka 所写，我想添加一个 CSS 类，没有选择或类似的。
@CSchulz ：我已经发布了答案，让我知道这就是你要找的吗？

标签： symfony symfony-forms symfony-2.5

【解决方案1】：

最后我等待的解决方案将在 2.7 (source) 中实现。

选择属性

返回选项的附加 HTML 属性。可以是一个数组，一个可调用（如“choice_label”）或属性路径。如果是数组， "choices" 数组的键必须用作键。

// array
$builder->add('attending', 'choice', array(
    'choices' => array(
        'Yes' => true,
        'No' => false,
        'Maybe' => null,
    ),
    'flip_choices' => true,
    'choice_attr' => array(
        'Maybe' => array('class' => 'greyed-out'),
    ),
));

【讨论】：

在 Symfony 3 中，这仍然有效，但有趣的是它在 Docs 中是如何给出的：“这可以是一个属性数组（如果它们对于每个选择都相同)"... 所以看起来你可以在这个数组中使用一个相同的条目来为所有选择设置一个值。但随后，它降低了 1 行命令“选择数组的键必须用作键”。我希望 - 如果您总是希望所有选择都使用相同的类 - 您可以使用 'choice_attr' => ['class' => 'sameclass']

【解决方案2】：

我不确定您在寻找什么，但正如我通过 Florian Peschka's 评论了解的那样，您想将 custom class 添加到特定（特定）选项，那么这就是我尝试过的。

JQuery

$('select>option:eq(1)').addClass("custom_class");

这里eq() 方法：将匹配元素集减少到指定索引处的元素。就像Array 它的索引从0 开始所以如果你想选择第二个选项然后写eq(1)。

在上面的代码中，我在第二个选项中添加了custom_class..

HTML：

<select name="select">
   <option class="x" value="1">red</option>
   <option value="2">blue</option>  # suppose you wanted to add custom class in this option
   <option class="y" value="3">green</option>
</select>

现在的样子

<option class="custom_class" value="2">blue</option>

Working Demo

要签入演示，您可以右键单击下拉菜单并选择Inspect element with firebug。

如果这不是您要查找的内容，请使用您的预期输出更新您的问题。附描述

【讨论】：

是的，这是预期的输出，但我希望我可以通过模板或类似的方式来做到这一点。 :) 但是到目前为止，谢谢。
@CSchulz ：如果它有帮助，那么您可以接受答案并投票...... :)

【解决方案3】：

您必须覆盖表单中特定小部件的布局。看例子How can I add css classes to specific symfony2 form choices?

【讨论】：

这不会为每个选项添加相同的类吗？