Adding optgroup to JavaScript

Hello,

I want to add optgroup values to a form option select that is created with JavaScript.

I have attached an example of what I want.
<p>This: <br />
<script>
var tinyMCEMediaList = [
	// Name, URL
	["Sample Flash 1", "media/sample.swf"],
	["Sample Flash 2", "media/sample.swf"],
	["Sample Flash 3", "media/sample.swf"],
	["Sample Quicktime 1", "media/sample.mov"],
	["Sample Quicktime 2", "media/sample.mov"],
	["Sample Quicktime 3", "media/sample.mov"],
	["Sample AVI", "media/sample.avi"]
 
];
 
var html = getMediaListHTML('medialist','src','media','media');
 
function getMediaListHTML() {
	if (typeof(tinyMCEMediaList) != "undefined" && tinyMCEMediaList.length > 0) {
		var html = "";
 
		html += '<select id="linklist" name="linklist" style="width: 250px" onchange="this.form.src.value=this.options[this.selectedIndex].value;updatePreview();">';
		html += '<option value="">---</option>';
 
		for (var i=0; i<tinyMCEMediaList.length; i++)
			html += '<option value="' + tinyMCEMediaList[i][1] + '">' + tinyMCEMediaList[i][0] + '</option>';
 
		html += '</select>';
		return html;
	}
	return "";
}
document.write(html);
</script>
</p><p>Should look like this: <br />
<select id="linklist" name="linklist" style="width: 250px" onchange="this.form.src.value=this.options[this.selectedIndex].value;updatePreview();">
<option value="">---</option>
<optgroup label="Flash">
<option value="Sample Flash 1">Sample Flash 1</option>
<option value="Sample Flash 2">Sample Flash 2</option>
<option value="Sample Flash 3">Sample Flash 3</option>
</optgroup>
<optgroup label="Quicktime">
<option value="Sample Quicktime 1">Sample Quicktime 1</option>
<option value="Sample Quicktime 2">Sample Quicktime 2</option>
<option value="Sample Quicktime 3">Sample Quicktime 3</option>
<optgroup label="AVI">
<option value="Sample AVI">Sample AVI</option>
</optgroup>
</select>
</p>

Open in new window

LVL 16
hankknightAsked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
Here you go:
function getMediaListHTML2()
{
	var html = "";
	var s=[];
	if (typeof(tinyMCEMediaList) != "undefined" && tinyMCEMediaList.length > 0)
	{
 
		for (var i=0; i<tinyMCEMediaList.length; i++)
		{
			var temp = tinyMCEMediaList[i][0].split(" ");
			if( /\w+/.test(temp[1]) )
			{
				if( !s[ temp[1] ] )
				{
					s[ temp[1] ]={};
					s[ temp[1] ].text = new Array();
					s[ temp[1] ].value = new Array();
				}
				s[ temp[1] ].text.push(tinyMCEMediaList[i][0]);
				s[ temp[1] ].value.push(tinyMCEMediaList[i][1]);
			}
		}
		html +='<select id="linklist" name="linklist" style="width: 250px" onchange="this.form.src.value=this.options[this.selectedIndex].value;updatePreview();">';
		html +='<option value="">---</option>';
		for( var e in s)
		{
			html +="<optgroup label='"+e+"'>";
				for( var j=0,limit=s[e].text.length; j < limit; ++j )
					html += "<option value='"+s[e].value[j]+"'>"+s[e].text[j]+"</option>";
			html +="</optgroup>";
		}
		html+="</select>";
 
	}
return html;
}

Open in new window

0
 
hankknightAuthor Commented:
Thanks, that is awsome!  

I have posted a related question here:

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23151215.html
0
All Courses

From novice to tech pro — start learning today.