Items in levels within an HTML ComboBox. Is It Possible?

Let's say you want to list in a ComboBox items for sale on an e-commerce site. But in this list, I want the category name to be displayed first and below the items.
Example:

  • sports
  • bicycle
  • Boot
  • decoration
  • carpet
  • curtain

But it would still be good until I can indent the items. More or less like in engraving a follow:
insert the description of the image here
Is it possible? Come again?

Author: Andrey, 2018-03-23

2 answers

For this you have to use the <optgroup> inside the <select>

See example:

<select>
    <optgroup label="Category 1">
        <option>Item 1</option>
        <option>Item 2</option>
    </optgroup>
    <optgroup label="Category 2">
        <option>Item 3</option>
        <option>Item 4</option>
    </optgroup>
</select>
 1
Author: hugocsl, 2018-03-23 19:45:50

Reference: https://www.w3schools.com/tags/tag_optgroup.asp

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
 1
Author: DiegoSantos, 2018-03-23 19:46:24