Is it bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?

Question

I would like to make groups of the text content of an <option /> tag. Say I have the following: <option>8:00 (1 hour)</option>, the time pattern 8:00 can be modified, then the text in parenthesis (1 hour) can also be modified.

I was thinking of doing something like

<option>   <span>8:00</span>   <span> (1 hour)</span> </option> 

Is it bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?

Answer 1

From the HTML 5spec:

Content model:

• If the element has a label attribute and a value attribute: Nothing.
• If the element has a label attribute but no value attribute: Text.
• If the element has no label attribute and is not a child of a datalist element: Text that is not inter-element whitespace.
• If the element has no label attribute and is a child of a datalist element: Text.

So depending on context there are two things that you can put inside an <option> — text or nothing at all — you may not put a <span> or any other element there.

---

From the HTML 4.01 spec:

<!ELEMENT OPTION - O (#PCDATA)         -- selectable choice --> 

(Even the HTML 3.2 and HTML 2 specs say: <!ELEMENT OPTION - O (#PCDATA)*>)

---

An option element cannot have any child elements. So yes, it is bad.

Answer 2

You can use a Javascript plugin to overcome this limitation. For example jQuery plugin "Select2" Select2 plugin homepage. I use it in a couple of my projects and think that it's pretty flexible and convenient.

There are a number of them, but they do quite same thing - convert traditional <select> into <div> blocks with an extra functionality.