dynamically building optgroup using javascript

**rama1977** · 02-11-2013, 07:24 PM

Hi,

I am trying to group options using <optgroup> tag and below is the html which I want to apply the javascript code and add optgroup tag.

HTML Code:

<html>
<body>
<select id="vendorCode" name="vendorCode">

<option value="05-South">Chennai</option>
<option value="06-South">Bangalore</option>

<option value="01-North">Delhi</option>
<option value="02-North">Punjab</option>
<option value="03-North">Gujarat</option>

</select>

</body>
</html>

The output I needs is as below after applying javascript to add the optgroup tags.

HTML Code:

<select id="vendorCode" name="vendorCode">

<optgroup label="South">
<option value="05-South">Chennai</option>
<option value="06-South">Bangalore</option>
</optgroup>

<optgroup label="North">
<option value="01-North">Delhi</option>
<option value="02-North">Punjab</option>
<option value="03-North">Gujarat</option>
</optgroup>


</select>

Please let me know the javascript code. I have tried few things but the label is getting mixed up as it is having like 05-South/01-North etc.

Thanks in advance for your time. I really appreciate.

Thanks
Ram

**jscheuer1** · 02-12-2013, 12:16 PM

For me the real trick was getting all of the options for each optgroup to migrate to their optgroup. Here's the code of a working page for this:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Optgroup - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function makegroups(id, groups){
	var parentselect = document.getElementById(id), opts = parentselect.options,
		i = opts.length, j = groups.length, groupobj = {};
	while(--j > -1){
		groupobj[groups[j]] = [document.createElement('optgroup'), []];
		groupobj[groups[j]][0].setAttribute('label', groups[j]);
		parentselect.insertBefore(groupobj[groups[j]][0], parentselect.firstChild);
	}
	while(--i > -1){
		j = groups.length;
		while(--j > -1){
			if(opts[i].value.indexOf(groups[j]) > -1){
				groupobj[groups[j]][1].push(opts[i]);
			}
		}
	}
	j = groups.length;
	while(--j > -1){
		i = groupobj[groups[j]][1].length;
		while(--i > -1){
			groupobj[groups[j]][0].appendChild(groupobj[groups[j]][1][i]);
		}
	}
}
</script>
</head>
<body>
<select id="vendorCode" name="vendorCode">

<option value="05-South">Chennai</option>
<option value="06-South">Bangalore</option>

<option value="01-North">Delhi</option>
<option value="02-North">Punjab</option>
<option value="03-North">Gujarat</option>

</select>
<script type="text/javascript">
makegroups('vendorCode', ['South', 'North']);
</script>
</body>
</html>

Live Demo:

http://home.comcast.net/~jscheuer1/s...s/optgroup.htm

I also worked out a version where the groups can be determined via regular expression from the option values:

http://home.comcast.net/~jscheuer1/s.../optgroup2.htm

Use your browser's "view source" to get its code if you're interested.

**javacrypter** · 06-19-2014, 05:51 PM

Hello John,

I was able to use your regular expression solution to fix a problem for me. Thank you for coming up with that. That is an ingenious script. I was curious if there would be a way to alphanumerically sort the option groups? I understand that it creates the option groups by the order that it sees them first in the values of the options. I could move around the options so that it could display the option groups in the preferred order Please let me know if you need an example of the working page I am dealing with. Thank you in advance if you could point me in the right direction.

Thomas

**jscheuer1** · 06-19-2014, 06:57 PM

As far as I know, unless you are willing to have 10 come before 2 and similar odd treatment of other numbers, there is no simple alpha-numeric sort in javascript. I did a search and found:

http://sourceforge.net/projects/js-natsort/

which in very limited testing appears to do the job.

Now, do you want to sort the groups, so that in the examples in this thread North would come before South, or do you want to sort within the groups, so that Gujarat would come before Punjab?

**javacrypter** · 06-19-2014, 07:07 PM

North before South

**jscheuer1** · 06-19-2014, 07:59 PM

http://home.comcast.net/~jscheuer1/s.../optgroup3.htm

**jscheuer1** · 06-21-2014, 01:38 PM

Actually, after more testing, I've decided that the sorting algorithm provided by that script is inferior as it will put something like:

bob

after:

bob1

No other sorting routine does that. I discovered this because I wanted to make up my own functions. I think they work better. But obviously they could do with more testing and scrutiny.

Here's a demo which uses them:

http://home.comcast.net/~jscheuer1/s.../optgroup4.htm

**javacrypter** · 06-23-2014, 11:50 PM

Thank you for all of your help with this. I am trying to apply it to the values that I am working with. Maybe you could help. The values I am working with have spaces in them which throws the sort function off

Code:

<select id="vendorCode" name="vendorCode">

<option value="1x">one</option>
<option value="Android Device">two</option>
<option value="4G LTE Android Device">three</option>
<option value="iPhone">four</option>
<option value="Smart Device">five</option>
<option value="4G LTE Smartphone Device">six</option>

</select>

Honestly I am not really worried about how it sorts it, but rather that I can have those option groups spelled out. It has been mashing together the 4G LTE groups, and it doesn't like that some start with a digit and others don't. I changed my function call to:

makegroups('vendorCode', /(\w+)/);

but to no avail. If you could help with this I would greatly appreciate it.

Thomas

**jscheuer1** · 06-24-2014, 01:15 AM

How's this:

http://home.comcast.net/~jscheuer1/s.../optgroup5.htm

**javacrypter** · 06-24-2014, 08:17 PM

Again, amazing solution. Thank you very much John. I finally was able to port to my actual application and it is all working like a dream, except I am getting a option group at the bottom called 'undifined' with the options, 'natsort' and 'natcasesort'. The script is running on an internal site and only used by a handful of people, so if it is an inevitable problem, it is fine. I am more curious as to where it is getting those values to actually put into the options. I of course can see that is what you are calling the functions and whatnot. If you need to see how it is all actually working on my page, just let me know. Thank you again.

Thomas

Thread: dynamically building optgroup using javascript

Thread Tools

Search Thread

dynamically building optgroup using javascript

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Similar Threads

Including javascript in ajaxpage loaded dynamically

Nested OPTGROUP in IE?

Javascript not executing in dynamically created DIV (using PHP)

Loading javascript content dynamically into Google map javascript

Loading Javascript dynamically using Hyperlinks

Bookmarks

Bookmarks

Posting Permissions