'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

htmlnesteddropdownhtml-select


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Grz Lnx

Related Questions