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) /* Now we add the options */ $('option', this).each(function (i) { var oLi = $('<li><a href="#" index="' + i + '">' + $(this).html() + '</a></li>'); $ul.append(oLi); }); with this code var indexMap = new Array(); var indexCountMap = 0; var indexCount = 0; var optgIndex = 0;//default index when user selects optgroup itself $('> *', this).each(function(i){ if(jQuery(this).is('option')){ var oLi2 = $('<li><a href="#" class="selectitem" index="' + indexCount + '">' + $(this).html() + '</a></li>' ); $ul.append(oLi2); indexMap[indexCount] = indexCountMap; indexCountMap++; indexCount++; } else if(jQuery(this).is('optgroup')) { var oLi = $('<li><a class="optgroup" index="' + optgIndex + '">' + $(this).attr("label") + '</a></li>'); $ul.append(oLi); indexCountMap++; $('option', this).each(function(k){ var oLi2 = $('<li class="optgrouped-option">' + '<a href="#" class="selectitem indent" index="' + indexCount + '">' + $(this).html() + '</a></li>' ); $ul.append(oLi2); indexMap[indexCount] = indexCountMap; indexCountMap++; indexCount++; }); } });

Now we have to set selected item in generated HTML. For that we use indexMap values. Find following code around line 379 /* Set the default */ $('a:eq(' + this.selectedIndex + ')', $ul).click(); and replace it with /* Set the default */ $('a:eq('+ indexMap[this.selectedIndex] +')', $ul).click();

Styling

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;
}

Categories: Code snippets - jQuery - Programming