asked on

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

Badotz

Assuming "sel" is a select element:

var og = document.createElement('optgroup').appendChild(document.createTextNode('Fruit'));
sel.appendChild(og);

hankknight

ASKER

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".

Badotz

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 ;-)

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Adding optgroup to JavaScript from &quot;-folder&quot; in array

Adding optgroup to JavaScript from "-folder" in array