Question

Given this:

<p:selectOneMenu value="#{myBean.selection}" onchange="handleChange();">
    <f:selectItem itemLabel="foo" itemValue="0"/>
    <f:selectItem itemLabel="bar" itemValue="1"/>
</p:selectOneMenu>

<script type="text/javascript">
    function handleChange() {
        // Do something here...
    }
</script>

How do I detect the selected item in JavaScript so I can take appropriate action (e.g. show/hide a div) in the handleChange() function? There doesn’t appear to be any documentation for this.

Answer 1

The selected value is in the HTML DOM event attribute available by this.value.

<p:selectOneMenu value="#{myBean.selection}" onchange="handleChange(this.value)">
    <f:selectItem itemLabel="foo" itemValue="0"/>
    <f:selectItem itemLabel="bar" itemValue="1"/>
</p:selectOneMenu>

<script type="text/javascript">
    function handleChange(selection) {
        // Do something here with selection...
    }
</script>

---

There doesn’t appear to be any documentation for this.

This is not specific to JSF, but to HTML/JS in general, so the answer ought to be found by looking at the JSF-generated HTML output in the client side and understanding some basic HTML/JS.