Can I render many options with selected="selected" using f:selectItem?

Question

Is it possible to render many options within select with selected="selected" attribute using f:selectItem/f:selectItems tags?

I want to generate select for usage with jQuery UI MultiSelect Widget, and the example code should look like that:

<select name="example-presets" multiple="multiple" size="5">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3" selected="selected">Option 3</option>
    <option value="option4" selected="selected">Option 4</option>
    <option value="option5" disabled="disabled">Option 5</option>
    <option value="option6" disabled="disabled">Option 6</option>
    <option value="option7">Option 7</option>
    <option value="option8">Option 8</option>
    <option value="option9">Option 9</option>
</select>

I know I can do that using ui:repeat or write custom component...

score 2 · Accepted Answer · edited May 23 '17 at 11:49

When talking in JSF context, you normally do that by setting the <h:selectManyListbox value> to the desired value beforehand, like as you would do for every other JSF UIInput component in order to preset/preselect the value.

The desired HTML output can be achieved with this view

<h:selectManyListbox id="example-presets" value="#{bean.selectedItems}" size="5">
    <f:selectItems value="#{bean.availableItems}" />
</h:selectManyListbox>

and this model in #{bean}

private List<String> selectedItems; // +getter+setter
private List<SelectItem> availableItems; // +getter (no setter necessary)

@PostConstruct
public void init() {
    selectedItems = Arrays.asList("option1", "option3", "option4");
    availableItems = Arrays.asList(
        new SelectItem("option1", "Option 1", null, false),
        new SelectItem("option2", "Option 2", null, false),
        new SelectItem("option3", "Option 3", null, false),
        new SelectItem("option4", "Option 4", null, false),
        new SelectItem("option5", "Option 5", null, true),
        new SelectItem("option6", "Option 6", null, true),
        new SelectItem("option7", "Option 7", null, false),
        new SelectItem("option8", "Option 8", null, false),
        new SelectItem("option9", "Option 9", null, false)
    );
}

The generated HTML output is:

<select id="form:example-presets" name="form:example-presets" multiple="multiple" size="5">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3" selected="selected">Option 3</option>
    <option value="option4" selected="selected">Option 4</option>
    <option value="option5" disabled="disabled">Option 5</option>
    <option value="option6" disabled="disabled">Option 6</option>
    <option value="option7">Option 7</option>
    <option value="option8">Option 8</option>
    <option value="option9">Option 9</option>
</select>

Exactly like you intented. Make sure that your jQuery selector is right, by the way. See also How to select JSF components using jQuery?

I have no idea what you mean with "doesn't render to select". Please clarify. Do you mean that they aren't preselected? Perhaps you used objects instead of strings as item values and the `equals()` method of those objects is missing/broken and therefore JSF can't preselect them? — BalusC, Jul 24 '13 at 12:20
In any way, I updated the answer to show a more concrete ready-to-use example. Perhaps you failed to get the model part right although that's already shown in a bit decent JSF book/tutorial. — BalusC, Jul 24 '13 at 12:32
Uh, then use `` instead? Note that my answer exactly matches the HTML presentation in your question. So it was more your mistake that you left `multiple` and `size` in while apparently not understanding what they do. Those can only be generated by ``. I recommend to spend a bit more time learning basic HTML, so that JSF is easier to understand. At htmldog.com you can find good HTML tutorials. — BalusC, Jul 24 '13 at 12:37
OK, excuse me, I've forgotten that select can be shown without dropdown. This generates the HTML I need and I can apply MultiSelect on it :) — Web Devie, Jul 24 '13 at 12:48

Can I render many options with selected="selected" using f:selectItem?

1 Answers1