selectOneMenu not populating another selectOneMenu using ajax listener

selectOneMenu not populating another selectOneMenu using ajax listener

I am using two selectOneMenu. Selection of first one should populates the
second one by providing the selected value as a parameter. I have gone
through a lot of online stuff but still not find a way to resolve it. The
listener method is getting called on dropdown value change. Someone please
help me out.
<p:selectOneMenu value="#{myBean.mGroup}" id="mGroup" style="width:130px;" >
<f:selectItem itemLabel="Environment" itemValue="E"></f:selectItem>
<f:selectItem itemLabel="Health" itemValue="H"></f:selectItem>
<f:selectItem itemLabel="Physical" itemValue="P"></f:selectItem>
<p:ajax update="mClass" listener="#{myBean.mGroupChangedListener}" />
</p:selectOneMenu>
<p:selectOneMenu id="mClass" style="width: 130px;" value="#{myBean.mClass}">
<!-- <f:selectItem itemLabel="Temp1" itemValue="Temp1" /> if i
remove comment from this line, it works -->
<f:selectItems value="#{smyBean.mClassList}" var="clas"
itemLabel="#{clas.mClassDesc}" itemValue="#{clas.mClassId}" />
</p:selectOneMenu>
// listener method
public void mGroupChangedListener(AjaxBehaviorEvent event) {
List<MClass> mClassList =
service.getMClass(event.getComponent().getAttributes().get("value").toString());
myBean.setMClassList(mClassList);
}