I created a hirarviewcontrollers where when a role is selected it should display its child roles(getSearchRole()).but I am not knowing how to display child roles when role is selected.Please help me in solving the problem.Below is the code.

Controller:
public with sharing class hirarviewcontrollers {
  public Map<id,UserRole> roleUsersMap{get;set;}
    public Map<id,List<UserRole>> parentChildRoleMap{get;set;}

              public List<UserRole> tempList{set;get;}
                            public List<UserRole> displayList{set;get;}


public List<user> allSubordinates{get;set;}
   
   
    public hirarviewcontrollers(ApexPages.StandardController controller) {
    
    selectedRole='';
    }
    
    public string selectedRole{get;set;}
    public List<Userrole> roleLst{get;set;}
        public List<Userrole> roleLstopt{get;set;}

    public Pagereference getSearchRole(){
    roleLst=new List<Userrole>([select developername,id,name,ParentRoleID from userrole where name like:'%'+selectedRole+'%' order by parentRoleId ]);
    
    // Create a blank list
        allSubordinates = new List<User>();
        
        // Get role to users mapping in a map with key as role id
        roleUsersMap = new Map<Id, UserRole>([select Id, Name, parentRoleId, (select id, name from users) from UserRole order by parentRoleId]);
        
        // populate parent role - child roles map
        parentChildRoleMap = new Map <Id, List<UserRole>>();        
        for (UserRole r : roleUsersMap.values()) {
            if (!parentChildRoleMap.containsKey(r.parentRoleId)){
                tempList = new List<UserRole>();
                tempList.Add(r);
                parentChildRoleMap.put(r.parentRoleId, tempList);
               for(integer i=0;i<parentChildRoleMap.size();i++){   //As it is displaying one filed on vf, I used for loop but not working, as i new to code,I am confused with map.please help me
              displayList=  (List<UserRole>)parentChildRoleMap.get(r[i].parentRoleId);
              }
            }
            else {
                tempList = (List<UserRole>)parentChildRoleMap.get(r.parentRoleId);
                tempList.add(r);
                parentChildRoleMap.put(r.parentRoleId, tempList);
            }
        }
   // [select Id,name from UserRole where ParentRoleId  = :UserRole AND ParentRoleID != null]
    return null;
    
    }
    
 public List<SelectOption> getRoles()
{
  List<SelectOption> options = new List<SelectOption>();
      roleLstopt=new List<Userrole>([select developername,id,name,ParentRoleID from userrole]);

  options.add(new SelectOption('--None--','--None--'));
  for (Integer j=0;j<roleLstopt.size();j++)
  {
      options.add(new SelectOption(roleLstopt[j].name,roleLstopt[j].name));
  }
  return options;
}
}

VF Page:

<apex:page standardcontroller="UserRole" extensions="hirarviewcontrollers">
<apex:form >
<apex:pageBlock >
<apex:selectList value="{!selectedRole}" multiselect="false" size="1" >
  <apex:actionSupport event="onchange" reRender="a" action="{!getSearchRole}" />
<apex:selectOptions value="{!Roles}"/>
        </apex:selectList><p/> 
 <!--<apex:selectList value="{!selectedRole}" multiselect="false" size="1" >
               <apex:actionSupport event="onchange" reRender="a" />

            <apex:selectOptions value="{!citynames}"/>
        </apex:selectList><p/> -->
<!--<apex:outputLabel >Search Role</apex:outputLabel>
<apex:inputText value="{!selectedRole}"/>
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="Search" title="Search Role" action="{!getSearchRole}" />
</apex:pageBlockButtons>-->
<apex:pageBlock >
<apex:pageBlockTable value="{!displayList}" var="d">
<apex:column value="{!d.name}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:pageBlock>
<apex:pageBlock id="a">
<apex:pageBlockSection collapsible="false" title="Search Results" columns="1">
<apex:pageBlockTable value="{!roleLst}" var="rolel">
<apex:column headerValue="Rolename" value="{!rolel.name}"/>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>