Is there a way to have some text (not option) inside <select>?

Question

We have a Select inside a form with say 4 options. My client wants to categorize options in a way so we can have some text on top related options. It will looks like:

<select>
   Cat 01
   <option value="Some Value">Some Option</option>
   <option value="Some Value">Some Option</option>
   Cat 02
   <option value="Some Value">Some Option</option>
   <option value="Some Value">Some Option</option>
</select>

I know above is not a valid markup. I know I can put Cat01 & Cat02 as options without a value but I am wondering if there is a valid code or more appropriate workaround for it?

Answer 1

Yes there definately is

Try this

<select>
   <optgroup label="Cat 01">
   <option value="Some Value">Some Option</option>
   <option value="Some Value">Some Option</option>
</optgroup>
      <optgroup label="Cat 02">
   <option value="Some Value">Some Option</option>
   <option value="Some Value">Some Option</option>
   <option value="Some Value">Some Option</option>
</optgroup>
</select>