Style select list items programatically

[Antz]

Hi Igor,

I have a list that is generated using some PHP conditional logic in my WordPress theme that outputs categories, example;

<option class="parent"> Parent Category A </option>
<option> Sub Category 1 </option>
<option> Sub Category 2 </option>
<option class="parent"> Parent Category B </option>
<option> Sub Category 1 </option>
<option> Sub Category 2 </option>

I am trying to style each of the parent categories independently of their sub categories so for instance they might be bold or underlined, or even a different font size.

But I am having trouble figuring out how to apply arbitrary styling to items within my select menu because Select2 treats each <option> the same, even stripping out any pre-defined class names or <span> elements which of course is intentional.

Is there an easy way to preserve class names or any HTML tag elements or must it be done via some conditional JavaScript and "formatResults" parameter. If its the latter could you provide a simple example of such?

I'd also like the parent category options within the select menu to be non-selectable, if thats possible too?

Thanks for reading.

[Igor Vaynberg]

i think the easiest path is to use the master branch.

1) master branch supports optgroups. these elements are already not
selectable and they get a special css style you can use.
2) when attached to select format functions can access the original
option element ia state.element (docced on the site) so you can read
the extra css classes you have and use them when producing the extra
markup.

given all those goodies the master branch is not too stable. i dont
think there are any major bugs in it, but i think some config options
may still change between now and 3.0. so if you use it now there is a
chance you may have to rework something if you upgrade to a later 3.x
version.

if that does not sound good you can patch 2.1 to implement feature
(2). it should be pretty trivial. this is the change you will have to
make: https://github.com/ivaynberg/select2/commit/6b736669d28bef28040e0424811e1f556206e5cc

-igor

> --
> You received this message because you are subscribed to the Google Groups "select2" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/select2/-/vktzh0ZUhEgJ.
> To post to this group, send email to sel...@googlegroups.com.
> To unsubscribe from this group, send email to select2+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/select2?hl=en.
>

[fromoutofs...@gmail.com]

Thanks a lot for your reply Igor, I'll get a chance to try the above this weekend. I'll report back in the event that it benefits others in the interim until 3.0 is released. Much appreciated.

[brasco.m...@gmail.com]

Hello Did you figure out how to make the parent category bold?