Items in levels within an HTML Combobox. Is it Possible?

Asked

Viewed 254 times

2

Let’s say you want to list in one Combobox items for sale on an e-commerce site. But on this list, I want to first display the category name and below the items.
Example:

  • Sports
  • Bicycle
  • Boot
  • Decorating
  • Rug
  • Curtain

But good would still be until you can indent the items. More or less like in the following picture:
inserir a descrição da imagem aqui
Is it possible? How?

  • You are using Bootstrap?

  • No, I have little knowledge in the area.. only basic maintenance

  • Okay, just so you know, then I guess one of the answers below will answer.

  • 1

    If you want to do something more personalized: Materialize CSS (simple and easy to use)

  • @Very cool! I didn’t know... it’s a library, right? It’s free?

  • Yes it’s a free library, based on Material Design Lite

Show 1 more comment

2 answers

1


For that you have to use the <optgroup> within the <select>

Take the 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

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>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.