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
>Solution :
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.