CODEWITHSUNDEEP
htmlnesteddropdownhtml-select
Marios Georgiou
Marios Georgiou

Reputation: 13

Nested Dropdown Select Input

Is there a way to create a nested select input field using only html?

For example I would have a dropdown with 4 options (categories) but each of those 4 options will have another 2 options(subcategory) inside.

e.g. I want to choose Category 1 -> Subcategory item 2

Upvotes: 0

Views: 2204

Answers (1)

Grz Lnx
Grz Lnx

Reputation: 49

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>

If they choose an option inside a optgroup you'll know they've opted for that category.

Upvotes: 1

Related Questions