How to fix/add optgroup support to jqTransform jQuery plugin

Although jqTransform is abandoned plugin it's still widely used. Maybe someone finds this code helpful when in need of adding optgroup support to jqTransform.

Originally jqTransform didn't support optgroups in select element. This code patch adds it and also I provide with some basic CSS to make optgroup and it's options to stand out. I was inspired by this forum post when I needed optgroup support for one project.

This code assumes that first element in your select is "default" one. It's returned when user selects optgroup itself not options in it. I consider it as bug, but I didn't need to fix it for my work.

Live demo is here.

Code patches

You have to modify original jquery.jqtransform.js file. You have to replace following code (around line 344) with this code

Now we have to set selected item in generated HTML. For that we use indexMap values. Find following code around line 379 and replace it with


To make optgroup items to stand out you might add some CSS to style it using given classes. For example.

.optgroup {
  font-weight: bold;
.jqTransformSelectWrapper li.optgrouped-option {
  padding-left: 10px;

No gravatar aivable
kaleem #
hello thanks for this, but optgroup can still be selected , how can we stop selecting optgroup please help thanks.
I am co-founder of web/media studio GIVE me. and (android)developer at start-up named Choco. Read my about page to learn more.