带有标志图标的 JSF RichFaces 区域设置下拉列表

Question

我浏览了很长时间寻找解决方案，但我没有找到合适的答案。 我正在使用 RichFaces 库开发 JSF Web 应用程序。应用程序支持不同的语言环境，用户可以通过从下拉列表中选择来更改它们。 我希望下拉列表中的项目在语言环境名称旁边有一个标志图标。

不幸的是，我找不到使用 JSF 的方法。

下拉列表的xthml代码是：

<h:panelGroup>
    <h:form id="languageForm" prependId="false">
        <h:outputText value="#{usermsg['locale.select.message']}" styleClass="userMessage"/>
        <h:selectOneMenu id="dropdown" value="#{localeBean.selectedLocale}" onchange="submit()">
            <f:selectItems value="#{localeBean.locales}" />
        </h:selectOneMenu>
    </h:form>
</h:panelGroup>

标志图标只需使用纯 HTML 和 JQuery 即可完成，就像我在这里找到的那​​样：http://www.ixtendo.com/polyglot-language-switcher-jquery-plugin/

要将图标放在下拉列表项中，我必须为列表中的每个元素应用 css，例如：

#en { 
    background-image: url(/resources/images/flags/gb.png);
}

#fr { 
    background-image: url(/resources/images/flags/fr.png);
}

这里的问题是：

1. f:selectItems（以及 f:selectItem）似乎不支持样式属性。
2. 我可以使用 javascript 将样式应用于标签，但我需要有标签的 ID，而 f:selectItem（似乎）也不允许这样做。

我想的另一件事是使用上面链接中提到的JQuery控件，但这里还有一个问题：如何将所选选项的值设置为JSF bean。换句话说，我可以通过 JQuery 或 Javascript 和纯 HTML 设置#{localeBean.selectedLocale} 吗？

我发现 PrimeFaces 有一个 selectOneMenu 控件，它允许添加图标http://www.primefaces.org/showcase/ui/selectOneMenu.jsf（名为“带有过滤器的内容”） 但我担心我们目前无法从 RichFaces 切换到 PrimeFaces。

感谢任何帮助。

Answer 1

我自己找到了解决方案。我认为我可以使用 jQuery 将 id 或类添加到 html 标签，所以我所做的就是添加了以下脚本：

<script type="text/javascript">
    $(document).ready(function() {
       $('option').each(function(){
          $(this).addClass(this.value);
       });
    });
</script>

还有css：

    option {
        background-repeat: no-repeat;
        background-position: right;
    }

    .en {
        background-image: url(/resources/images/flags/gb.png);
    }

    .fr {
        background-image: url(/resources/images/flags/fr.png);
    }
    ...

我使用类是因为我的应用中有两个带有标志的菜单，但这也适用于 id。

脚本将该类添加到 JSF 生成的标签中，因此将值发送回 managedBean 不再存在问题。

谢谢大家。