JSF(seam) how do I change the combo box content without form submit

I have a form to enter information including 3 field

1. textbox user name (requiere=true)
2. Combobox bank name (requiere=true)
3. Combobox bank branches (requiere=true)

I want when the user selects the bank, the bank branch will load without filling out form (particular user does not need to fill in the textbox: "user name")

For example : my xhmtl form

<h:form id="ftextform">
    <s:validateAll id="ValidateAll">
        <fieldset>

            <div class="entry">
                <h:outputLabel for="name" styleClass="label #{invalid?'errors':''}">name<em>*</em></h:outputLabel>
                <h:inputText id="name" value="#{branch.name}" required="true" />
            </div>

            <div class="entry">
                <h:selectOneMenu id="creditBank" value="#{branch.creditBank}" immediate="true">
                    <f:selectItems value="#{fExtBankList}"></f:selectItems>
                    <a:support id="onkeyup" event="onchange" actionLi开发者_StackOverflow中文版stener="#{branch.creditBankchange}" reRender="searchResults"/>
                </h:selectOneMenu>
            </div>

            <a:outputPanel id="searchResults">
            <div class="entry">
                <h:selectOneMenu id="creditBankBranch" value="#{branch.creditBankBranch}">
                    <f:selectItems value="#{branch.creditBankBranchList}"></f:selectItems>
                </h:selectOneMenu>
            </div>
            </a:outputPanel>

        </fieldset>

        <fieldset>
            <div class="buttonBox">
                <h:commandButton id="check" value="Cancel" action="#{branch.cancel}" immediate="true"/>
                &#160;
                <h:commandButton id="next" value="Next" action="#{branch.next}"/>
            </div>
        </fieldset>

    </s:validateAll>
</h:form>

my bean :

@Name("branch")
public class Branch implements IBranch
{

    private static int count = 0;
    private String creditBank;
    private String creditBankBranch = "aaa";
    private String name;

    private  List<SelectItem> creditBankBranchList = new ArrayList<SelectItem>();

    // action
    public void creditBankchange()
    {
        SelectItem e = new SelectItem(creditBank + count, creditBank);
        creditBankBranchList.add(e);
    }
....

---

the simple answer is to use <a4j:region>

details:

view(xhtml)

<h:form id="ftextform">

        <fieldset>

            <div class="entry">

                <h:outputLabel for="name" styleClass="label #{invalid?'errors':''}">name<em>*</em></h:outputLabel>
                <h:inputText id="name" value="#{branch.name}" required="true">
                    <s:validate/>

                </h:inputText>
                <div class="errors"><h:message for="name"/></div>
            </div>

            <a:region>
                <div class="entry">
                    <h:selectOneMenu id="creditBank" value="#{branch.creditBank}" immediate="true" >
                        <f:selectItems value="#{branch.creditBankList}"></f:selectItems>
                        <a:support status="globalStatus" event="onchange" reRender="searchResult"
                                    action="#{branch.creditBankchange}"/>
                    </h:selectOneMenu>
                    <div class="errors"><h:message for="creditBank"/></div>
                </div>

                <s:div style="width: 300px" id="searchResult"  immediate="true">
                    <h:selectOneMenu id="creditBankBranch" value="#{branch.creditBankBranch}" >
                        <f:selectItems value="#{branch.creditBankBranchList}"></f:selectItems>
                    </h:selectOneMenu>
                    <div class="errors"><h:message for="creditBankBranch"/></div>
                </s:div>
            </a:region>

        </fieldset>

        <fieldset>
            <div class="buttonBox">
                <h:commandButton id="check" value="Cancel" action="#{branch.cancel}" immediate="true"/>
                &#160;
                <h:commandButton id="next" value="Next" action="#{branch.next}"/>
            </div>
        </fieldset>
</h:form>

and bean:

public class Branch implements IBranch
{
    private String creditBank;
    private String creditBankBranch;
    private String name;

    private  List<SelectItem> creditBankBranchList = new ArrayList<SelectItem>();
    private  List<SelectItem> creditBankList = extBankList();

    // action
    public void creditBankchange()
    {
        extBankBranchList();
    }

    // (test)create test banks list
    private List<SelectItem>  extBankList()
    {
        List<SelectItem> list = new ArrayList<SelectItem>();
        for(int i =0; i < 10; i ++)
        {
            list.add(new SelectItem(i, Integer.toString(i)));
        }

        return list;
    }

    // (test)load bank branchs list from bank
    private void extBankBranchList()
    {
        this.creditBankBranchList.clear();
        for(int i =0; i < 10; i ++)
        {
            this.creditBankBranchList.add(new SelectItem(i, "bank " + this.creditBank + "branch " + Integer.toString(i) ));
        }
    }