• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 676
  • Last Modified:

Adding optgroup to JavaScript from "-folder" in array

Hello,

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

The group values are found in the array by "-folder-".

I have attached an example of what I want.

Thanks!
<p>This: <br />
<script>
var tinyMCEMediaList = [
	// Name, URL
	["-folder-", "Fruit"],
	["Apples", "images/apples.jpg"],
	["Pears", "images/pears.jpg"],
	["Peaches", "images/peaches.png"],
	["-folder-", "Sweets"],
	["Candy", "images/candy.jpg"],
	["Ice Cream", "images/icream.jpg"],
	["Cake", "images/cake.jpg"],
	["-folder-", "Veggies"],
	["Carrots", "images/carrots.jpg"],
	["Broccoli", "images/Broccoli.gif"] 
];
 
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="Fruit">
<option value="images/apples.jpg">Apples</option>
<option value="images/pears.jpg">Pears</option>
<option value="images/peaches.png">Peaches</option>
</optgroup>
<optgroup label="Sweets">
<option value="images/candy.jpg">Candy</option>
<option value="images/icream.jpg">Ice Cream</option>
<option value="images/cake.jpg">Cake</option>
</optgroup>
<optgroup label="Veggies">
<option value="images/carrots.jpg">Carrots</option>
<option value="images/Broccoli.gif">Broccoli</option>
</optgroup>
</select>
</p>

Open in new window

0
hankknight
Asked:
hankknight
  • 2
1 Solution
 
BadotzCommented:
Assuming "sel" is a select element:

var og = document.createElement('optgroup').appendChild(document.createTextNode('Fruit'));
sel.appendChild(og);
0
 
hankknightAuthor Commented:
Thanks, Badotz, but what I want it for the JavaScript to see this:
       ["-folder-", "Fruit"]

And the JavaScript should create a folder (because it sees "-folder-") called "Fruit".
0
 
BadotzCommented:
Well, you will have to "tell" javascript what to do should it encounter a folder, eh? How do you fill the select now?

Or do you fill it manually and wish to do it automatically somehow? That is a different monster ;-)
0
 
hieloCommented:
I think this is what you want:
function getMediaListHTML2()
{
	var html = "";
	var s=[];
	if (typeof(tinyMCEMediaList) != "undefined" && tinyMCEMediaList.length > 0)
	{
 		var key = "";
		for (var i=0; i<tinyMCEMediaList.length; i++)
		{
			if(tinyMCEMediaList[i][0]=="-folder-")
			{
				key = tinyMCEMediaList[i][1];
				if( !s[ key ] )
				{
					s[ key ]={};
					s[ key ].text = new Array();
					s[ key ].value = new Array();
					continue;
				}
			}
				s[ key ].text.push(tinyMCEMediaList[i][0]);
				s[ key ].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

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now