Default Blank Item in f:selectItem dropdown list

Question

I am creating a dropdown menu. I am using the attributes such as hideNoSelectionOption, noSelectionOption, itemLabel="", and itemValue="#{null}" to have a default value that is a blank value and is the first item shown when the page loads. Instead, when the page loads, the default item shown is the last item in the list. One fix I had was putting a blank item last in the list, but I don't like that fix as I want the blank item to be first in the list, and the default item shown when the page loads. Any Suggestions?

                 <tr class="contentRow">
                    <td><span> <h:selectOneMenu
                    styleClass="selectOneMenuLeft" id="menuProgramType" value="#{searchBean.selectedSearchType}"
                    onchange="javascript:displayDivs();" hideNoSelectionOption="true">
                    <f:selectItem noSelectionOption="true" itemLabel=""/>
                    <f:selectItem itemLabel="Item1"  />
                    <f:selectItem itemLabel="Item2" />
                    <f:selectItem itemLabel="Item3"  />
                    <f:selectItem itemLabel="Item4" />
                    </h:selectOneMenu></span></td>

                    <td><span> <h:selectOneMenu
                    styleClass="selectOneMenuLeft" id="menuSystemOfOriginType" value="#{searchBean.selectedSearchType}"
                    onchange="javascript:displayDivs();" hideNoSelectionOption="true" >
                    <f:selectItem itemLabel="" itemValue="#{null}"  noSelectionOption="true" />
                    <f:selectItem itemLabel="FirstItem"  />
                    <f:selectItem itemLabel="SecondItem" />
                    <f:selectItem itemLabel="LastItem"  />
                    </h:selectOneMenu></span></td>
                </tr>

Answer 1

All of your items don't have a value. Hence, all of your items match the "blank" case. The client will show the last one as selected.

Give the items a sensible value. If you intend to use the label as value, then just do as such.

<f:selectItem itemValue="Item1" />
<f:selectItem itemValue="Item2" />
<f:selectItem itemValue="Item3" />
<f:selectItem itemValue="Item4" />

Namely, when unspecified, the item label will default to the item value.

See also:

• Our selectOneMenu wiki page

---

Unrelated to the concrete problem, that javascript: pseudoprotocol is unnecessary. It's the default already since HTML4 in 1998.