Question

We are using JSF2.0 ,our end HTML needs to have <li> in the list box instead of <optionValues>. We are using <h:selectOneListBox> in the jsf . We are trying to use Jquery to change the <optionValues> to <li>.

Is there any other bettter solution for this?

Answer 1

Not with the standard JSF HTML component set. They all renders standard HTML elements without any fanciness.

You need to look at a JSF component library with enhanced skinnability support. The PrimeFaces component library for example, which uses jQuery UI under the covers, has a <p:selectOneListbox> which generates an <ul><li>, exactly as you need. See the showcase page. Here’s the generated HTML source of the 1st <p:selectOneListbox> example on the showcase page:

<ul>
    <li class="ui-selectlistbox-item ui-corner-all">Option 1</li>
    <li class="ui-selectlistbox-item ui-corner-all ui-state-active">Option 2</li>
    <li class="ui-selectlistbox-item ui-corner-all">Option 3</li>
</ul>