Saturday, December 12, 2015

How to reset dropdown SelectOneMenu on primefaces commandButton reset type

  
First you are just showing the values in your p:selectOneMenu but not assigning those values, value property stands to be able to assign currently selected value from client side into the backing bean value, so;

<p:selectOneMenu id="myMenu" value="#{bean.selectedCountry}">
    <f:selectItem itemValue="Select Country" itemLabel="Select Country" />
    <f:selectItem itemValue="Poland" itemLabel="Poland"/>
</p:selectOneMenu>
 
Now if user selects Poland as country it will be setted as selectedCountry on the backing bean also do not forget to implement getter and setter methods.
Then if you want to reset the value of the component, p:selectOneMenu generates a label and changing it's text can do the trick on view:

<p:commandButton onclick="resetter();" type="reset" value="Clear" update="form"></p:commandButton>
And the js function:
function resetter() {
    document.getElementById('form:myMenu_label').innerHTML = 'Select Country';
}

No comments:

Post a Comment