populate drop-down values dynamically using Ajax

I have 3 drop-downs. 1st drop-down contains some values when the page loads. I need to populate 2 nd drop-down based on the value selected in 1st dropdown. Similarly, I need to populate 3 nd drop-down based on the va开发者_开发技巧lue selected in 1st and 2nd dropdown.

Initially I tried like this.

 <h:selectOneMenu value="#{stu.country}" >
  <f:selectItems value="#{bean.allCountries}" />
  <a4j:support event="onchange"  action="#{bean.retrieveStates(stu.country)}"  
  reRender="states_dropDown"></a4j:support>
   </h:selectOneMenu>

//ly, for 2nd drop-down

    <h:selectOneMenu id="states_dropDown" value="#{stu.state}" >
      <f:selectItems value="#{bean.allStates}" />
    <a4j:support event="onchange"  
     action="#{bean.retrieveCities(stu.country,stu.state)}"  
     reRender="City_dropDown"></a4j:support>
       </h:selectOneMenu>

Some times this code works fine. But some times it doesn't invoke managed bean method.

Can you please help??

The first that comes to my mind is that you should declare the <a4j:support> with immediate="true", so that no validation errors stop the bean from being called

Also, I'm having this one (it is inside a <rich:comboBox> though):

<a4j:support event="onchange" reRender="target"
    limitToList="true" eventsQueue="targetOnchange"
    action="#{bean.action}" ajaxSingle="true"
    requestDelay="500" />

<a4j:support event="onselect" reRender="target" limitToList="true"
    action="#{bean.action}" ajaxSingle="true" />

And it works fine. I've used the 2 events, because with rich:comboBox they mean different things. Actually, I'd suggest using the comboBox in your case, it will be more user-friendly.