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

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

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

Solution 3:

The option element

Content model: Text

No, it’s not ok. Consider keeping the values around in your script so you can recompose them when necessary.

Solution 4:

You're better off using an HTML replacement for your <select> if you want to do this.