Can I use HTML tags in the options for select elements? [duplicate]

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

Answers:

Answer

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

Answer

No, but this: Styling HTML Select may help you and there a lof of detail and votes here:

How to style a <select> dropdown with CSS only without JavaScript?

Answer

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)

Custom drop-down panel with jQuery

Answer

No, you can't do this. <option> tags cannot contain any other tags.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.