By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,159 Members | 1,880 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,159 IT Pros & Developers. It's quick & easy.

dynamic "optgroup"

Claus Mygind
100+
P: 571
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.

Expand|Select|Wrap|Line Numbers
  1.     document.getElementById("myMenu").innerHTML +=  '<select id="getNextGeoPage" onchange="navigate(this)" name="getNextGeoPage">'
  2. '</select>&nbsp;/'
  3.  
  4.     document.getElementById("getNextGeoPage").options[0] =  new Option( "Select from archive", "", true, true);
  5.     document.getElementById("getNextGeoPage").optgroup +=  '<optgroup label="2009"/>'
  6.     document.getElementById("getNextGeoPage").optgroup +=  '<optgroup label="2008">'
  7.     document.getElementById("getNextGeoPage").options[1] =  new Option( "December", "18", false, false);
  8.     document.getElementById("getNextGeoPage").options[2] =  new Option( "November", "13", false, false);
  9.     document.getElementById("getNextGeoPage").options[5] =  new Option( "October", "7", false, false);
  10.     document.getElementById("getNextGeoPage").options[3] =  new Option( "September", "5", false, false);
  11.     document.getElementById("getNextGeoPage").options[4] =  new Option( "August", "1", false, false);
  12.  
Dec 21 '08 #1
Share this Question
Share on Google+
2 Replies


Claus Mygind
100+
P: 571
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.

Expand|Select|Wrap|Line Numbers
  1.         document.getElementById("myMenu").innerHTML +=  '<select id="getNextGeoPage" onchange="navigate(this)" name="getNextGeoPage">;'
  2.         document.getElementById("myMenu").innerHTML +=  '</select>&nbsp;/'
  3.  
  4.         document.getElementById("getNextGeoPage").innerHTML  = '<option value="" selected="selected">Select from archive</option>'
  5.         document.getElementById("getNextGeoPage").innerHTML += '<optgroup label="2009"></optgroup>'
  6.         document.getElementById("getNextGeoPage").innerHTML += '<optgroup label="2008">'
  7.         document.getElementById("getNextGeoPage").innerHTML += '<option value="18">December</option>'
  8.         document.getElementById("getNextGeoPage").innerHTML += '<option value="13">November</option>'
  9.         document.getElementById("getNextGeoPage").innerHTML += '<option value="7">October</option>'
  10.         document.getElementById("getNextGeoPage").innerHTML += '<option value="5">September</option>'
  11.         document.getElementById("getNextGeoPage").innerHTML += '<option value="1">August</option>'
  12.         document.getElementById("getNextGeoPage").innerHTML += '</optgroup>'
  13.  
Dec 21 '08 #2

acoder
Expert Mod 15k+
P: 16,027
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.
Dec 22 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.