如何在下拉列表的选项中定义span标记

Question

我正在使用HAML创建一个下拉列表，如下所示：

%select.categories
  %option{:category => 'question'}
    Top Questions in
    %span#topic-name
  %option{:category => 'muse'}
    Top Muses in
    %span#topic-name
  %option{:category => 'user'}
    Top Users in
    %span#topic-name
.clear

我的目的是将主题名称添加到span id'topic-name'。但是，当我尝试使用jQuery $（'＃topic-name'）查找span时，返回了一个空数组。

我检查了生成的HTML，但我无法看到定义的span标记

任何人都可以告诉我如何创建跨度以添加“主题名称”

由于

Answer 1

HTML无法插入选项元素 - 仅限文本。你所要求的是无法实现的。

或者，您可以将主题名称添加为data-x参数，但这仅在HTML5中有效。我不知道如何在HAML中实现这一点，但HTML看起来像：

<select>
    <option data-topicname="ABC">Top Questions in</option>
</select>

Answer 2

执行此操作的唯一方法是使用模拟组合框行为的插件。我不知道jQuery，但是ExtJS组件具有这样的功能 - 但是Rory提到的标准HTML和CSS并不提供它们。

这可能是一个很好的起点：

http://www.designdim.com/2011/07/10-important-jquery-selectboxdropdown-plugins/

Answer 3

正如@Rory McCrossan所说，你不能在span内option。它是无效的HTML。

但是，您可以找到要修改的Option，并使用JQuery的.append()函数插入新文本。

例如：

%select.categories
    %option{:id =>'optQuestion', :category => 'question'}
        Top Questions in

添加文本的JQuery将是

$('optQuestion').append("some text"); // where "some text" is what you want to insert

如果您有同一个select的多个副本，并希望使用相同的“某些文字”更新所有副本，则可以使用课程而不是ID进行定位。

Answer 4

你可以使用optgroup html标签

请参阅此处的文档

http://www.w3schools.com/tags/att_optgroup_label.asp

Answer 5

这似乎是optgroup的一个很好的候选者，它允许一个不可选择的“标题”选项，并将其附带的选项组合在一起。