2

Vamos dizer que queira listar num ComboBox itens a venda em um site e-commerce. Mas nessa lista, quero que primeiro seja exibido o nome da categoria e abaixo os itens.
Exemplo:

  • Esportes
  • Bicicleta
  • Chuteira
  • Decoração
  • Tapete
  • Cortina

Mas bom seria ainda até conseguir indentar os itens. Mais ou menos como na gravura a seguir:
inserir a descrição da imagem aqui
É possível? Como?

6
  • Vc está usando Bootstrap?
    – hugocsl
    Commented 23/03/2018 às 19:54
  • Não, tenho pouco conhecimento na área.. apenas manutenção básica
    – Andrey
    Commented 23/03/2018 às 19:55
  • Ok, só pra saber mesmo, então creio que qq uma das respostas abaixo vai de atender.
    – hugocsl
    Commented 23/03/2018 às 19:59
  • 1
    Caso você queira fazer algo mais personalizado: Materialize CSS (simples e fácil de usar)
    – Costamilam
    Commented 23/03/2018 às 20:02
  • @GuilhermeCostamilam Muito legal! Não conhecia... é uma biblioteca, certo? É free?
    – Andrey
    Commented 23/03/2018 às 20:05

2 Respostas 2

1

Para isso vc tem que usar o <optgroup> dentro do <select>

Veja o exemplo:

<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

Referência: 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .