带有标志图标的JSF RichFaces locale下拉列表

Question

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

不幸的是，我无法在JSF中找到这样的方法。

下拉列表的xml代码是:

<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:selectItem(以及f:selectItem)似乎不支持style属性。
2. 我可以应用样式的标签使用javascript，但我需要有标签的id，其中f:selectItem(似乎)不允许为好。

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

我发现PrimeFaces有一个selectOneMenu控件，它允许添加图标http://www.primefaces.org/showcase/ui/selectOneMenu.jsf(名为'Content with Filter')但恐怕我们目前负担不起从RichFaces切换到PrimeFaces的费用。

Answer 1

我自己找到了解决办法。我认为我能够使用jQuery向html标签添加id或类，所以我所做的是，我添加了以下脚本:

<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的问题。

谢谢大家。