How to put the selected value from <apex:selectOptions> into an <apex:outputField> tag?

Question

I am trying to display all the accounts as a pick list in visualforce page and when I select any option from the pick-list the pick-list has to collapse and the option I selected has to be displayed in place of pick-list code is displayed below.

Visualforce code

<apex:page controller='selectOptions_demo' >
    <apex:form>
        <div align='center' style=' color:red;font-size:20px '>
            The account you selected is {!choice}
        </div>
        <apex:pageBlock>
            <apex:pageBlockSection columns="1">
                <apex:actionFunction action="{!getaccounts}" name="getac" />
                <apex:selectList value='{!choice}' label='select an accont' onclick="getac()">
                    <apex:selectOptions value="{!opls}" />
                </apex:selectList>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex Code:

public class selectOptions_demo
{
    public list<SelectOption> opls{get;set;}
    public string choice {get;set;}
    public void getaccounts()
    {
        opls=new list<selectOption>();
        list<account> acls=[select name from account];
        for(account ac:acls)
        {
            opls.add(new selectoption(ac.name,ac.name));
        }
    }
}

Output:

so, as displayed in image above when I select an option the pick list remains same, please tell me how to collapse the pick list and display the selected option inside an apex:outputField or apex:inputFiled.

Thanks in Advance.