dynamic "optgroup"

[Claus Mygind]

I am adding a select box on the fly to a menubar. For the most part straight forward. Just one little hangup. I want to add the Option Group. Not sure how that should be coded. Don't mind the goofiness of the current look. The idea is a new month will be added to the list each month (hence two option groups right in a row. But what is also missing is the closing tag for the 2008 options group. So I need examples for the start and close of the options group.

	document.getElementById("myMenu").innerHTML +=  '<select id="getNextGeoPage" onchange="navigate(this)" name="getNextGeoPage">'
'</select>&nbsp;/'

	document.getElementById("getNextGeoPage").options[0] =  new Option( "Select from archive", "", true, true);
	document.getElementById("getNextGeoPage").optgroup +=  '<optgroup label="2009"/>'
	document.getElementById("getNextGeoPage").optgroup +=  '<optgroup label="2008">'
	document.getElementById("getNextGeoPage").options[1] =  new Option( "December", "18", false, false);
	document.getElementById("getNextGeoPage").options[2] =  new Option( "November", "13", false, false);
	document.getElementById("getNextGeoPage").options[5] =  new Option( "October", "7", false, false);
	document.getElementById("getNextGeoPage").options[3] =  new Option( "September", "5", false, false);
	document.getElementById("getNextGeoPage").options[4] =  new Option( "August", "1", false, false);

[Claus Mygind]

Well after some hours I got it to work. I abandonded trying to add options and instead used the .innerHTML property. Not sure if that is the best way, but it seems to work.

		document.getElementById("myMenu").innerHTML +=  '<select id="getNextGeoPage" onchange="navigate(this)" name="getNextGeoPage">;'
		document.getElementById("myMenu").innerHTML +=  '</select>&nbsp;/'

		document.getElementById("getNextGeoPage").innerHTML  = '<option value="" selected="selected">Select from archive</option>'
		document.getElementById("getNextGeoPage").innerHTML += '<optgroup label="2009"></optgroup>'
		document.getElementById("getNextGeoPage").innerHTML += '<optgroup label="2008">'
		document.getElementById("getNextGeoPage").innerHTML += '<option value="18">December</option>'
		document.getElementById("getNextGeoPage").innerHTML += '<option value="13">November</option>'
		document.getElementById("getNextGeoPage").innerHTML += '<option value="7">October</option>'
		document.getElementById("getNextGeoPage").innerHTML += '<option value="5">September</option>'
		document.getElementById("getNextGeoPage").innerHTML += '<option value="1">August</option>'
		document.getElementById("getNextGeoPage").innerHTML += '</optgroup>'

[acoder]

Optgroup is a child of the select element. Options would be children of the optgroup - see HTML OPTGROUP TAG. So append the options to the optgroup and the optgroup to the select.