Reading client-side value of <p:selectOneMenu/> in onchange callback

java, javascript, jsf-2, primefaces

Solution

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.

Problem

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.

Original source