How to get all child of a user group in Joomla?

Question

I have a user_groups table

id  parent_id       title
1       0           Public
2       1           Registered
3       2           Author
4       3           Editor
12      2           Customer Group (Example)

You can see here Register(2) have 2 child id(3,12) and id(3) also have it's child(4). So it's create a tree. Now I need to make such tree in list box. So I have tried like this:

<?php
$db = JFactory::getDbo(); 
$query = "select grp.id, grp.title from #__usergroups AS grp where parent_id=2";
$db->setQuery($query);  
$groups = $db->loadObjectList();
?>
<tr>
    <td>Select Group</td>
    <td>
    <select name="usergroup">
    <option value="0"><?='Select Group';?></option>                 
    <?
    foreach($groups as  $group) {

        $query = "select grp.id, grp.title from #__usergroups AS grp where parent_id=".$group->id;
        $db->setQuery($query);  
        $groups2 = $db->loadObjectList();
    ?>
    <option value="<?=$group->id?>"><?=$group->title?></option>
    <?  if($groups2!=''){
            foreach($groups2 as $group2){
                $query = "select grp.id, grp.title from #__usergroups AS grp where parent_id=".$group2->id;
                $db->setQuery($query);  
                $groups3 = $db->loadObjectList();
            ?>
            <option value="<?=$group2->id?>">--<?=$group2->title?></option>
            <?
                if($groups3!=''){
                    foreach($groups3 as $group3){
                        $query = "select grp.id, grp.title from #__usergroups AS grp where parent_id=".$group3->id;
                        $db->setQuery($query);  
                        $groups4 = $db->loadObjectList();
                        ?>
                        <option value="<?=$group3->id?>">----<?=$group3->title?></option>
                        <?
                        if($groups4!=''){
                            foreach($groups4 as $group4){
                                ?>
                                <option value="<?=$group4->id?>">--------<?=$group4->title?></option>
                                <?
                            }
                        }
                    }
                }
            }
        }
    }?>
    </select>
    </td>
</tr>

But this is not the best way to it. If I add more child item then this will not work untill I make another level. So I need the effective way to do it so I don't need to add level in the future. Please help!

Answer 1

You can use optgroup for this like,

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

Read this https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup