In order to achieve this, you need to create a VF page and use REST API to get a list of all approval process present in org. After getting the list of the approval process in JSON, need to parse the response and display the approval process names in the picklist. When a user selects particular approval process, the system will query all process instances records and then with the help of TargetObjectid, it will fetch the Object name. Then the system will match the object name related to approval process with an object related to target object id.
If it got matched, then process Instance record will be stored in a list and will be displayed to the user.

Visualforce page snapshot:

Notes:
First create remote site setting with Remote Site URL as https://xxx.salesforce.com where xxx domain name like ap1,na1 etc.
I tried to filter the number of processInstance records by putting where clause but it didn't work for me. So I queried all processInstance records.
We can specify where clause on created date or last modified date by giving an option to the user to select a date range. We can display two more fields as start date and end date on VF page and system will display only process instance records created or modified between these 2 dates.

Below is Visualforce page code:

<apex:page controller="DisplayApprovedRecordsController" action="{!FetchAllApprovalProcess}">
<apex:form >
<apex:pageblock title="Approval processess List">
<apex:pageblocksection columns="3">
<apex:pageblockSectionItem >
<apex:outputLabel value="Select" for="apr"></apex:outputLabel>
<apex:selectList value="{!selectedApprovalProcess}" size="1" id="apr">
<apex:selectOptions value="{!ApprovalWrapperList}"></apex:selectOptions>
<apex:actionsupport event="onchange" action="{!FindRecords}"/>
</apex:selectList>
</apex:pageblockSectionItem>
</apex:pageblocksection>
<apex:pageblockSection title="Approved Records" columns="1" >
<apex:pageblockTable value="{!recordList}" var="rec" rendered="{!recordList.size>0}">
<apex:column headerValue="Name">
<apex:outputlink value="/{!rec.TargetObjectId}">{!rec.TargetObject.name}</apex:outputlink>
</apex:column>
<apex:column headerValue="Status">
<apex:outputText value="{!rec.status}"></apex:outputText>
</apex:column>
</apex:pageblockTable>
<apex:outputpanel rendered="{!recordList.size==0}">
<apex:outputText value="No records to display"></apex:outputText>
</apex:outputpanel>
</apex:pageblockSection>
</apex:pageblock>
</apex:form>
</apex:page>

Apex Class Code:

public class DisplayApprovedRecordsController {
public List<ApprovalWrapper> ApprovalProcessList{get;set;}//list to store all approval process
public String selectedApprovalProcess{get;set;}
Public list<ProcessInstance> recordList{get;set;} //list to store processInstance records to display on UI

public List<selectoption> getApprovalWrapperList(){
List<selectoption> temp=new List<selectoption>();
temp.add(new selectoption('','--Select--'));
for(String ap:approvalMap.keyset()){
temp.add(new selectoption(ap,ap));
}
return temp;
}
public DisplayApprovedRecordsController (){
ApprovalProcessList=new List<ApprovalWrapper>();
recordList=new list<ProcessInstance> ();
}
public map<String,ApprovalWrapper> approvalMap=new map<String,ApprovalWrapper>();
public void FetchAllApprovalProcess(){
HttpRequest req = new HttpRequest();
req.setHeader('Authorization', 'Bearer ' + UserInfo.getSessionID());
req.setHeader('Content-Type', 'application/json');
String domainUrl=URL.getSalesforceBaseUrl().toExternalForm();
system.debug('********domainUrl:'+domainUrl);
String endpointUrl=domainUrl+'/services/data/v30.0/process/approvals/';
req.setEndpoint(endpointUrl);
req.setMethod('GET');
Http h = new Http();
HttpResponse res = h.send(req);
system.debug(res.getBody());
String ss=res.getBody();
string newjsondata = ss.replace('"object"','"objectName"');

// Parse entire JSON response.
JSONParser parser = JSON.createParser(newjsondata );
while (parser.nextToken() != null) {
// Start at the array of invoices.
if (parser.getCurrentToken() == JSONToken.START_ARRAY) {
while (parser.nextToken() != null) {
// Advance to the start object marker to
//  find next approval process object.
if (parser.getCurrentToken() == JSONToken.START_OBJECT) {
// Read entire  approval process object
ApprovalWrapper apr= (ApprovalWrapper)parser.readValueAs(ApprovalWrapper.class);
system.debug('Approval name: ' + apr.name);
system.debug('Id: ' + apr.id);
ApprovalProcessList.add(apr);
// Skip the child start array and start object markers.
parser.skipChildren();
}
}
}
}
system.debug('********ApprovalProcessList:'+ApprovalProcessList);
for(ApprovalWrapper aw:ApprovalProcessList){
approvalMap.put(aw.name,aw);
}
}
public Pagereference FindRecords(){
recordList=new list<ProcessInstance> ();
if(selectedApprovalProcess!=null && selectedApprovalProcess!=''){
recordList=new list<ProcessInstance> ();
String queryString='Select Id, TargetObjectId,TargetObject.name, Status From ProcessInstance Limit 10000';
System.debug('*********queryString:'+queryString);
List<ProcessInstance> temp=Database.query(queryString);
ApprovalWrapper aw=new ApprovalWrapper();
aw=approvalMap.get(selectedApprovalProcess);
String ObjName=aw.objectName;
recordList=new List<Processinstance>();
For(ProcessInstance sb:temp){
String ObjectName=String.valueof(sb.TargetObjectId.getSObjectType());
system.debug('****ObjectName:'+ObjectName);
if(Objectname.equalsignorecase(ObjName)){
recordList.add(sb);
}
}
System.debug('*********recordList:'+recordList);
}
return null;
}
public class ApprovalWrapper{
public String description{get;set;}
public String id{get;set;}
public String name{get;set;}
public String objectName{get;set;}
public Integer sortOrder{get;set;}
}
}

kindly mark it as solved if it helps you.


Best Regards,
Rakesh Thota.