Hey there, just thought I will post the solution i wrote for this here.
Open the jqtransform.js file and go to line 269 where the SELECT part is.
Replace the $('option',this) part with the following:
- if($('optgroup', this).length>0){
- $('optgroup', this).each(function(i){
- var oLi = $('<li><a class="optgroup">'+ $(this).data("country") +'</a></li>');
- $ul.append(oLi);
- $('option', this).each(function(k){
- var oLi2 = $('<li><a href="#" class="selectitem indent" index="'+ k +'">'+ $(this).html() +'</a></li>');
- $ul.append(oLi2);
- });
- });
- }else{
- $('option', this).each(function(k){
- var oLi2 = $('<li><a href="#" class="selectitem" index="'+ k +'">'+ $(this).html() +'</a></li>');
- $ul.append(oLi2);
- });
- }
In the HTML, instead of using label for optgroup, I changed it to a data attribute. Hence I used data("country"), simply modify that to what you prefer to name it as instead.
For the indent, it's a simple 20px margin left to create a differentiation between the optgroup and the normal selection.