0

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

1 Answer 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.

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you! This works exactly like I want it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.