How to reset dropdown on primefaces commandButton reset type

Question

How to reset the value of p:selectOneMenu on pressing p:commandButton on type reset. The code i have is as follows

<h:form id="form">

    <p:panelGrid columns="2" cellspacing="10" >
    <f:facet name="header">Login</f:facet>
    <p:outputLabel value="Username" />
    <p:inputText value="#{user.username}" />
    <p:outputLabel value="Password" />
    <p:password value="#{user.password}"></p:password>

    <p:outputLabel value="Locale" />
    <p:selectOneMenu >
    <f:selectItem itemValue="Select Country" itemLabel="Select Country" />
    <f:selectItem itemValue="Poland" itemLabel="Poland"/>
    </p:selectOneMenu>
    <p:commandButton value="Submit"></p:commandButton>
    <p:commandButton type="reset" value="Clear" update="form"></p:commandButton>
    </p:panelGrid>

</h:form>

On doing so, the username and password get cleared but the dropdown for select country is not reset.

Answer 1

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';
}