Can I use HTML tags in the options for select elements?
JavascriptJqueryHtmlCssJavascript Problem Overview
Is it possible for the options of an HTML select element to include HTML tags?
For example, given the following code:
<select>
<option value="one"><b>one is bold</b></option>
<option value="two">two has some <span style='color:red;'>red</span> text</option>
<option value="three">three is just normal</option>
</select>
I would like the options to actually render in HTML. In this application I can play with HTML, CSS, JavaScript (including jQuery). And the HTML itself is being rendered via Django (django.form.fields.select).
Javascript Solutions
Solution 1 - Javascript
No, you can't do this. <option> tags cannot contain any other tags.
Solution 2 - Javascript
No, but this: https://stackoverflow.com/questions/3418280/styling-html-select may help you and there a lof of detail and votes here:
Solution 3 - Javascript
No, you cannot.
What you would do if you wanted this is use something like a floating div and position and display it using Css to look like a select. Then using javascipt clicks allow users to select.
Something like this: Reinventing the dropdown
Solution 4 - Javascript
option tag does not allow any children other than text
Here is a fiddle I created a few months ago that replaces a select element with a list dropdown, and updates the select for each selection made. Just hide select with css http://jsfiddle.net/6zcRk/
The user in this thread then turned it into a plugin available on github( see link in thread)
https://stackoverflow.com/questions/9548618/custom-drop-down-panel-with-jquery