Hi. I want to create a selectlist exactly like this.

I created the logic for this but I really don't know how to make it with Visualforce.

Controller:

public class TaskController {
    public List<Task> lstTasksForUser {get;set;}
    public TaskController(){
        lstTasksForUser = [Select id, ActivityDate, Status, Subject, WhoId, WhatId, CompanyName__c, AccountId From Task WHERE Status!= 'Completed' AND OwnerId =: UserInfo.getUserId()];
    }
    
    public List<Task> tasksToday {get;set;}
    public List<Task> getTodayTasks(){
        tasksToday = [Select id, CreatedDate, ActivityDate, Status, Subject, WhoId, WhatId, CompanyName__c, AccountId From Task where ActivityDate = TODAY AND Status!= 'Completed'];
        return tasksToday;
    }
    
    public List<Task> tasksThisMonth {get;set;}
    public List<Task> getThisMonthTasks(){
        tasksThisMonth = [Select id, CreatedDate, ActivityDate, Status, Subject, WhoId, WhatId, CompanyName__c, AccountId From Task where ActivityDate = THIS_MONTH AND Status!= 'Completed'];
        return tasksThisMonth;
    }
    
    public List<Task> tasksCloseTomorow {get;set;}
    public List<Task> getTomorowCloseTasks(){
        tasksCloseTomorow = [Select id, CreatedDate, ActivityDate, Status, Subject, WhoId, WhatId, CompanyName__c, AccountId From Task where ActivityDate = TOMORROW AND Status!= 'Completed'];
        return tasksCloseTomorow;
    }
    
    public List<Task> tasksOverdue {get;set;}
    public List<Task> getOverdueTasks(){
        tasksOverdue = [Select id, CreatedDate, ActivityDate, Status, Subject, WhoId, WhatId, CompanyName__c, AccountId From Task where ActivityDate < TODAY AND Status!= 'Completed' ];
        return tasksOverdue;
    }
    
    
}

This is my VF page and I'm stuck on this selectList part. I want when I select Today in the selectListOptions my pageBlockTable to change and fetch the records for Today.

<apex:page controller="TaskController" tabStyle="Task">
    <apex:form >
        <apex:pageBlock title="My Tasks" id="tasks_list">
            <apex:pageBlockTable value="{!lstTasksForUser}" var="tsk">
                <apex:selectList size="5" onchange>
                	<apex:selectOptions value="{!TodayTasks}" >
                        
                    </apex:selectOptions>
                </apex:selectList>
                <apex:column headerValue="Complete" >
                    <a href="https://eu12.salesforce.com/{!tsk.id}/e?close=1&retURL=%2Fhome%2Fhome.jsp" rendered="{!if(tsk.status!='Completed',true,false)}" > 
                        X 
                    </a>
                </apex:column>
                <apex:column value="{!tsk.ActivityDate}"/>
                <apex:column value="{!tsk.Status}"/>
                <apex:column value="{!tsk.Subject}"/>
                <apex:column value="{!tsk.WhoId}"/>
                <apex:column value="{!tsk.WhatId}"/>
                <apex:column value="{!tsk.CompanyName__c}"/>
                <apex:column value="{!tsk.AccountId}"/>
            </apex:pageBlockTable>
        </apex:pageBlock> 
    </apex:form>
</apex:page>