Search jQuery

jQuery Forum

jqtransform optgroup with select box

in Using jQuery Plugins • 10 years ago

Hi all,

I was wondering is there a way to use optgroup within a select box ?

exemple:
<select size='1' name="select">
      <optgroup label="Opt group 1">
            <option value="opt1">Opt1</option>
            <option value="opt2">Opt2</option>
      </optgroup>
      <optgroup label="Opt group 2">
            <option value="opt1">Opt1</option>
            <option value="opt2">Opt2</option>
      </optgroup>
</select>

I ask it becouse it aint working and wheren't able to find any sollution for it.

Kind regards

D Baars

Replies(2)

ocastle

Re: jqtransform optgroup with select box

10 years ago

Hey,

I was wondering if you ever got a solution to this?

Oliver

edwin.toh..

Re: Re: jqtransform optgroup with select box

9 years ago

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.

Top Reply

Response title

Attachments

jQuery Forum

jqtransform optgroup with select box

Replies(2)

Re: jqtransform optgroup with select box

Re: Re: jqtransform optgroup with select box

Statistics

Tags

Actions