Hi All, 

I am new to the visualforce development world and I am trying to show the campaign member page on the contact record page based on a pick list. The pick list contains all existing campaign names and users can pick the specific campaign from the list, so, the visualforce page can show the related campaign member page.

The code works fine except it cannot show the record details based on the picklist value. 

Below is my controller,

public with sharing class CampaignRelatedListExtension
{
    public string campid {get; set;}
    public CampaignMember SelectedCamp{get;set;}
    public list<selectoption> getcampnames(){
        list<selectoption> campoptions = new list<selectoption>();
        for (campaign camp : [select id, name from campaign WHERE RecordType.ID='xxxxxxxxxxxxxxxx']){
            campoptions.add(new selectoption(camp.id, camp.name));
        }
        return campoptions;
    }
    public List<CampaignMember> campaignMembers { get; private set; }
    public CampaignRelatedListExtension(ApexPages.StandardController controller)
    {
        campaignMembers = [
            SELECT Campaign.Name, Country_of_Birth__c, CampaignId, Note__c FROM CampaignMember
            WHERE ContactId = :controller.getId()
        ];
    }
public PageReference save(){ 
update campaignMembers; 
return null;
 }
}

Below is the simple visualforce page, 

<apex:page standardController="Contact" extensions="CampaignRelatedListExtension">
    <apex:form >
    <apex:pageBlock title="TITLE">
                <style>
            body .bPageBlock .pbBody .red .pbSubheader{
                background-color:#F7A723;
            }
            body .bPageBlock .pbBody .grey .pbSubheader{
                background-color:#c0c0c0;
            }
            body .bPageBlock .pbBody .grey .pbSubheader h3{
                color:#000;
            }
        </style>
                <div>
            <table width="100%">
                <tr>
                    <td align="left"><strong>DESCRIPTION</strong></td>
                </tr>
            </table>
        </div>
        <apex:selectlist value="{!campid}" size="1">
            <apex:selectOptions value="{!campnames}" />
        <apex:outputPanel styleClass="red" layout="block">
        <apex:pageBlockSection title="Essential Information">
         <apex:pageBlockTable value="{!campaignMembers}" var="member">
            <apex:column headerValue="Note" value="{!member.Note__c}"/> 
     </apex:pageBlockTable>
        <apex:pageBlockTable value="{!campaignMembers}" var="member">
            <apex:column headerValue="Country of Birth">
                <apex:inputField value="{!member.Country_of_Birth__c}"/>
                </apex:column>  
        </apex:pageBlockTable> 
        </apex:pageBlockSection>
            </apex:outputPanel>
            </apex:selectlist>
    </apex:pageBlock> 
        <apex:commandButton value="Save" onclick="alert('Record successfully Saved');" action="{!save}" id="savebutton"/>
   </apex:form>     
</apex:page>

Could you please have me to figure it out? Thanks for your help.