3

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!

user2182010
  • 121
  • 2
  • 9

1 Answers1

0

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

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
  • Sorry this is not the solution what I am looking for.By doing this we can not get the value of optgroup.I need to get each parent data. – user2182010 Jul 12 '13 at 07:37
  • show the parent drop down first and based on user selection display the child dropdowns – Sundar Jul 12 '13 at 07:42
  • @Sundar But I want to show all the parent item and it's child on the same list box.As you can see I already done that but it's not best way to do it. – user2182010 Jul 12 '13 at 07:46
  • @user2182010 you can use `data` for this in `jquery` for `optgroup` – Rohan Kumar Jul 12 '13 at 08:04