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>

Answer 2

I believe what you need is optgroup:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Answer 3

You want to use the OPTGROUP tag

http://www.w3.org/wiki/HTML/Elements/optgroup

So your example should become

<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>
   </optgroup>
</select>