Выпадающий список JSF RichFaces с значками флагов

Question

Я искал решение в течение длительного времени, но я не нашел подходящего ответа. Я разрабатываю веб-приложение JSF, используя библиотеку RichFaces. Приложение поддерживает разные локали, и пользователь может изменить их, выбрав из выпадающего списка. Я хочу, чтобы элементы в раскрывающемся списке имели значки флагов вдоль имени локали.

К сожалению, я не смог найти способ сделать это с помощью 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, но мне нужно иметь идентификаторы для тегов, которые f: selectItem (кажется) также не позволяет.

Другое, что я должен использовать для управления JQuery, упомянутого в ссылке выше, но вот еще одна проблема: как установить значение выбранной опции для JSF-компонента. Другими словами, могу ли я установить # {localeBean.selectedLocale} через JQuery или Javascript и простой HTML?

Я обнаружил, что PrimeFaces имеет контроль selectOneMenu, который позволяет добавлять иконки http://www.primefaces.org/showcase/ui/selectOneMenu.jsf (один под названием «Content с фильтром») но я напуган, мы не можем себе позволить, чтобы перейти от RichFaces к PrimeFaces в данный момент.

Любая помощь приветствуется.

Answer 1

Я нашел решение самостоятельно. Я понял, что я могу добавить идентификаторы или классы HTML-теги с JQuery, так что я сделал, я добавил следующий скрипт:

<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); 
    } 
    ... 

Я использовал классы, потому что у меня есть два меню с флагами в моем приложении, но это работает и с идентификаторами.

Сценарий добавляет класс в теги, созданные JSF, поэтому больше не нужно отправлять значение обратно в managedBean.

Спасибо всем.