Question

<h:selectOneMenu id="queueSelectMenu" styleClass="selectOneMenue-style" 
    tabindex="1" value="#{reworkQueueMB.queueType}" onselect="alert('2');" >
    <f:selectItems value="#{queueMB.queueSelectItems}" />
</h:selectOneMenu>

When I choose the item of the selectmenu, I want to get the select event, but it doesn’t work.
I don’t want to use the change event, because when I select an item that is already selected, the change event will be triggered again.

Answer 1

The HTML DOM select event is only triggered when you select (highlight) text in a text input field such as <input> and <textarea>. But the <h:selectOneMenu> renders a HTML <select> element, not an <input> element. It does not allow you for selecting text in the field. The select event does nothing here.

Technically, setting the click event on every individual <option> element should work out for you.

<h:form id="formId">
    <h:selectOneMenu id="menuId" value="#{reworkQueueMB.queueType}">
        <f:selectItems value="#{queueMB.queueSelectItems}" />
    </h:selectOneMenu>
    <script>
        $("[id='formId:menuId'] option").click(function() {
            alert("2");
        });
    </script>
    ...

However, this does (unsurprisingly) not work in any IE browser, even not IE9.

Your best bet is really the change event. This is fully crossbrowser. A completely different alternative is to use a radiobutton group instead -which can be rendered by <h:selectOneRadio>. The click event should do exactly what you want.

<h:selectOneRadio value="#{reworkQueueMB.queueType}" onclick="alert('2')">
    <f:selectItems value="#{queueMB.queueSelectItems}" />
</h:selectOneRadio>