Nesting Optgroups in a Dropdownlist/Select

Nesting optgroups in a dropdownlist/select

Ok, if anyone ever reads this: the best option is to add four s at each extra level of indentation, it would seem!

so:

<select> <optgroup label="Level One">  <option> A.1 </option>  <optgroup label="    Level Two">   <option>     A.B.1 </option>  </optgroup>  <option> A.2 </option> </optgroup></select>

Nested Dropdown Select Input

Maybe with <optgroup>?

See my example below:

<label for="select">Choose your option</label>
<select id="select">
  <optgroup label="Category one">
    <option value="category-one__first-option">First option</option>
    <option value="category-one__second-option">Second option</option>
  </optgroup>
  <optgroup label="Category two">
    <option value="category-two__first-option">First option</option>
    <option value="category-two__second-option">Second option</option>
  </optgroup>
</select>

How to indent multiple levels of select optgroup with CSS?

8/29/2016 Edit

The original answer below is no longer functional in modern browsers. For those who still need to use a tag instead of doing magic with HTML lists, a better solution was found on this stackoverflow thread: Rendering a hierarchy of "OPTION"s in a "SELECT" tag

I would recommend the solution suggested by igor-krupitsky who suggests dropping and using the binary instead. At least on Chrome, this does not break using the keyboard to find the first character of an item in the list.

End Edit

The current HTML specification does not provide for nested tags adding any functionality (such as indentation). See this link.

In the mean time, you can manually style your levels with CSS. I tried using styles in your sample, but for some reason they did not render correctly, so at the very least the following will work:

<select name="select_projects" id="select_projects">        <option value="">project.xml</option>        <optgroup label="client1">            <option value="">project2.xml</option>        </optgroup>        <optgroup label="client2">            <option value="">project5.xml</option>            <option value="">project6.xml</option>            <optgroup label="client2_a">                <option value="" style="margin-left:23px;">project7.xml</option>                <option value="" style="margin-left:23px;">project8.xml</option>            </optgroup>            <option value="">project3.xml</option>            <option value="">project4.xml</option>       </optgroup>       <option value="">project0.xml</option>       <option value="">project1.xml</option>    </select>

Populating OPTGROUP and nested OPTION values

you can do like this FIDDLE:

var output = '[["AP",[{"id":88,"label":"a"},{"id":1,"label":"AP - Invoices"},{"id":79,"label":"AP - Supplier Reports"}]],["AR",[{"id":2,"label":"AR - Customers"},{"id":3,"label":"AR - Interface Lines"},{"id":4,"label":"AR - Transactions"}]]]';

$(document).ready(function() {
  var cat_id = $.parseJSON(output);
  console.debug(cat_id);
  $('#cat_id').empty();
  $.each(cat_id, function(index, data) {
    console.debug(data);
    var grpData = "<optgroup label=" + data[0] + ">";
    $.each(data[1], function(index2, subData) {
      grpData += "<option value="+subData.id+">"+data[0] +" - "+subData.label+"</option>";
    });
    grpData += "</optgroup>";
    $('#cat_id').append(grpData);
  });
});

Select2 optgroup inside optgroup

Nested optgroups are not supported in html, But you can use JavaScript to create them.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script>
            $(document).ready(function () {
                $('#NestedOptGroups').select2({
                    data: [
                        {
                            text: 'Level_1', children: [
                            {
                                text: 'Level_2', children: [
                                {id: 'Level2Opt0', text: 'Sub Option 1'},
                                {id: 'Level2Opt1', text: 'Sub Option 2'}
                            ]
                            },
                            {id: 'Level1Opt0', text: 'Main Level option 1'}
                        ]
                        }
                    ]
                });
            });
        </script>

    </head>
    <body>
            <input class="select2" id="NestedOptGroups" placeholder="select one"/>
    </body>
</html>

HTML / CSS: Nested options in a select field?

You can use <optgroup> to create a single level of nesting...

<select>
  <optgroup label="Options 1">
    <option>Option 1.1</option>
    <option>Option 1.2</option>
  </optgroup>
  <optgroup label="Options 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
</select>

PHP : Get Select with NESTED Optgroup and options dynamically by Strings

First create an ordered (and nested) array of your element array (line 76-89 in my code), and then you must use the recursive function (line 91-104 in my code) to create a string of options and optgroup.

Finally, print the output of the recursive function (line 107 in my code).

<?php

/*
Row 1 : mobiletti_puzzle_3d;mobili
Output : "optgroup" -> mobiletti_puzzle_3d
            "option" -> mobili

Row 2 : sculture;sculture_in_resina
Output : "optgroup" -> sculture
            "option" -> sculture_in_resina

Row 3 : sculture;sculture_in_resina;sculture_resina_grandi
Output : "optgroup" -> sculture
            "optgroup" -> sculture_in_resina
                "option" -> sculture_resina_grandi

If they have the same parent must be added as Option of Row 2 

Row 4 : sculture;sculture_in_metallo
Output : "optgroup" -> sculture
            "option" -> sculture_in_metallo


Final Output ALL EXAMPLE :
"optgroup" -> mobiletti_puzzle_3d
    "option" -> mobili
"optgroup" -> sculture
    "option" -> sculture_in_resina
    "option" -> sculture_in_metallo
    "optgroup" -> sculture_in_resina
        "option" -> sculture_resina_grandi

Split by " ; " the count-1 , always will be an optgroup and this will generate a Nested Optgroup 

*/
$Categories = [
    "mobiletti_puzzle_3d;mobili",
    "mobili;sedie_da_pranzo",
    "mobili;sgabelli",
    "mobili;tavolini_da_salotto",
    "mobili;tavolini_lato_divano",
    "mobili;tavoli_da_pranzo",
    "sculture;sculture_decorate_in_vetro",
    "sculture;sculture_in_bronzo",
    "sculture;sculture_in_metallo",
    "sculture;sculture_in_resina;sculture_resina_grandi",
    "sculture;sculture_in_resina;sculture_resina_medie",
    "sculture;sculture_in_resina;sculture_resina_piccole",
    "sculture;sculture_in_resina;serie_limitata_tatoo",
    "illuminazione;plafoniere",
    "illuminazione;lampade_decorative",
    "illuminazione;lampade_da_terra",
    "illuminazione;lampade_da_tavolo",
    "illuminazione;lampade_da_comodino",
    "illuminazione;lampadari",
    "divani_e_poltrone;mobili",
    "decorazione_murale;stampe_su_telaio_estetico",
    "decorazione_murale;specchi_design_moderno",
    "decorazione_murale;quadri_scultura_in_metallo",
    "decorazione_murale;puzzle_3d_in_legno",
    "decorazione_murale;orologi_parete",
    "decorazione_murale;dipinti_su_telaio_estetico",
    "decorazione_murale;dipinti_su_plexiglas",
    "consolle;mobili",
    "colonne;mobili",
    "collage_3d;decorazione_murale",
    "appliques;illuminazione",
    "altri_oggetti;vasi",
    "altri_oggetti;posacenere",
    "altri_oggetti;portagioie",
    "altri_oggetti;portacandele",
    "altri_oggetti;oggetti_decorativi",
    "altri_oggetti;centrotavola"
];

$select = [];
foreach ($Categories as $row) {
    $pointer = &$select;
    $row = explode(';', $row);
    $ogCount = count($row) - 1;
    for ($i = 0; $i < $ogCount; $i++) {
        $row[$i] = $row[$i];
        if (empty($pointer[$row[$i]]))
            $pointer[$row[$i]] = [];
        $pointer = &$pointer[$row[$i]];
        if (($i + 1) >= $ogCount)
            $pointer[] = $row[$i + 1];
    }
}

function recursiveSelect($_options, $_space = '')
{
    if (!is_array($_options))
        return  '<option value="' . $_options . '">' . $_options . '</option>' . "\n";
    else {
        $tmp = '';
        foreach ($_options as $key => $option)
            if (!is_array($option)) {
                $tmp .= recursiveSelect($option);
            } else
                $tmp .= '<optgroup label="' . $_space . $key . '">' . recursiveSelect($option, $_space . str_repeat(' ', 4)) . '</optgroup>' . "\n";
        return $tmp;
    }
}
?>
<select>
    <?php echo (recursiveSelect($select)); ?>
</select>

This code can handle all depths of nested elements in your array.

To better display the select optgroups, I added the space ($_space) parameter to the recursive function (with 4 spaces in line 101).

Nesting Optgroups in a Dropdownlist/Select