Salesforce Visualforce - <apex:actionFunction> Implementation using SelectOption

Hello guys,

Today I am going to show how to make show how to use <apex:actionFunction>. In this article, I am going to render all the contact which are related to the parent account. I am also going to use the Select option Class.

Here is the Controller Code:

public class ShowContactsRelatedToAccountController {
    public String selectedName{get;set;}
    public List<Contact> showContacts{get; set;}
    public List<Selectoption> lstnamesel = new List<selectoption>();
    public List<Selectoption> getselectedaccnamefields() {
        lstnamesel.add(new selectOption('', '-- None --'));
        System.debug('--lastname--'+lstnamesel);
        for(Account acc :[SELECT id,name FROM Account]) {
            lstnamesel.add(new selectoption(acc.id,acc.name));
        }
        System.debug('--lastname--'+lstnamesel);
        return lstnamesel;
    }
    public pageReference showContacts() {
        System.debug('@@@ selectedName @@@'+selectedName);
        showContacts = [SELECT Name FROM Contact WHERE AccountId =:selectedName];
        System.debug('@@@'+showContacts);
        return null;
    }
}

Visualforce Code:

<apex:page showHeader="false" sidebar="false" controller="ShowContactsRelatedToAccountController">
    <style>
        body{
            margin: 0 auto;
            height:20%;
            width:1000px;
            border: 2px solid black;
            padding: 20px;
        }
        header {
            height: 50px;
            width: 1000px;
            margin: 0 auto;
            text-align: center;
        }
        h1 {
            font-size: 30px;
        }
    </style>
    <header>
        <h1>
            Show Contacts Related to Accounts
        </h1>
    </header>
    <hr /><hr />
    <apex:form>
        <apex:actionFunction action="{!showContacts}" name="generateContacts" reRender="shContacts" /><br />
        <apex:selectList size="1" value="{!selectedName}" onchange="generateContacts()" id="picklist">
            <apex:selectOptions value="{!selectedaccnamefields}" />
        </apex:selectList>
    </apex:form>
    <apex:pageBlock>
        <apex:pageBlockTable id="shContacts" value="{!showContacts}" var="item">
            <apex:column value="{!item.Name}"/>
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>