Nesting optgroups in a dropdownlist select

Question

I have created a customer c  DropDownList control that can render out it s contents are optgroups  Not from scratch  I edited some code found on the internet  although I do understand exactly what it s doing   and it works fine   However  I have now come across a situation where I need to have two levels of indentation in my dropdown  i e    x000D   x000D   lt select gt  x000D     lt optgroup label  Level One  gt  x000D       lt option gt  A 1  lt  option gt  x000D       lt optgroup label  Level Two  gt  x000D         lt option gt  A B 1  lt  option gt  x000D       lt  optgroup gt  x000D       lt option gt  A 2  lt  option gt  x000D     lt  optgroup gt  x000D   lt  select gt  x000D   x000D   x000D    However  in the example snippet above  it is rendering as if Level Two was at the same amount of indentation as Level One   Is there a way to produce the nested optgroup behavior I am looking for

User · Answer

I think if you have something that structured and complex  you might consider something other than a single drop-down box

User · Answer

I needed clean and lightweight solution  so no jQuery and alike   which will look exactly like plain HTML  would also continue working when only plain HTML is preset  so javascript will only enhance it   and which will allow searching by starting letters  including national UTF-8 letters  if possible where it does not add extra weight  It also must work fast on very slow browsers  think rPi - so preferably no javascript executing after page load    In firefox it uses CSS identing and thus allow searching by letters  and in other browsers it will use  amp nbsp  prepending  but there it does not support quick search by letters   Anyway  I m quite happy with results   You can try it in action here  It goes like this   CSS    i0      i1   margin-left  1em     i2   margin-left  2em     i3   margin-left  3em     i4   margin-left  4em     i5   margin-left  5em      HTML  class  i1    i2  etc denote identation level     lt form action   filter   method  get  gt   lt select name  gdje  id  gdje  gt   lt option value 1 class  i0  gt Svugdje lt  option gt   lt option value 177 class  i1  gt Bosna i Hercegovina lt  option gt   lt option value 190 class  i2  gt Babin Do lt  option gt     lt option value 258 class  i2  gt Banja Luka lt  option gt   lt option value 181 class  i2  gt Tuzla lt  option gt   lt option value 307 class  i1  gt Crna Gora lt  option gt   lt option value 308 class  i2  gt Podgorica lt  option gt   lt option value 2 SELECTED class  i1  gt Hrvatska lt  option gt   lt option value 5 class  i2  gt Bjelovarsko-bilogorska   upanija lt  option gt   lt option value 147 class  i3  gt Bjelovar lt  option gt   lt option value 79 class  i3  gt Daruvar lt  option gt     lt option value 94 class  i3  gt Gare  nica lt  option gt   lt option value 329 class  i3  gt Grubi  no Polje lt  option gt   lt option value 368 class  i3  gt Cazma lt  option gt   lt option value 6 class  i2  gt Brodsko-posavska   upanija lt  option gt   lt option value 342 class  i3  gt Gornji Bogicevci lt  option gt   lt option value 158 class  i3  gt Klakar lt  option gt   lt option value 140 class  i3  gt Nova Gradi  ka lt  option gt   lt  select gt   lt  form gt    lt script gt   lt  --         window onload   loadFilter     -- gt      lt  script gt    JavaScript   function loadFilter        use strict        indents all options depending on  i  CSS class   function add nbsp         var opt   document getElementsByTagName  option        for  var i   0  i  lt  opt length  i            if  opt i  className 0       i           opt i  innerHTML   Array 3 opt i  className 1  1  join   amp nbsp      opt i  innerHTML          this means   amp nbsp   x  3  indent                         detects browser   navigator sayswho   function         var ua  navigator userAgent  tem      M  ua match   opera chrome safari firefox msie trident           s    d      i             if  trident i test M 1             tem     brv       d     d     g exec ua                 return  IE    tem 1                    M  M 2    M 1   M 2    navigator appName  navigator appVersion   -         if  tem  ua match  version       d    i     null  M 2   tem 1       return M join                    quick detection if browser is firefox   function isFirefox         var ua  navigator userAgent      M  ua match  firefox   i         return M           indented select options support for non-firefox browsers   if   isFirefox          add nbsp

User · Answer

I have written a beautiful  nested select  Maybe it will help you  https   jsfiddle net nomorepls tg13w5r7 1   x000D   x000D  function on change select e      alert e value  e title  e option  e select        document  ready      gt         NESTED SELECT      document  on  click     nested-cell   function           this  next  div   toggle  medium               document  on  change    input name  nested-select-hidden-radio     function         const parent     this  closest   nested-select        const value     this  attr  value        const title     this  attr  title        const executer   parent attr  executer        if  executer          const event   new Object          event value   value        event title   title        event option     this         event select   parent        window executer  apply null   event              parent attr  value   value       parent parent   slideToggle        const button   parent parent   prev        button toggleClass  active        button addClass  selected        button children   nested-select-title   html title              document  on  click     nested-select-button   function         const button     this       let select   button parent   children   nested-select-wrapper         if   button hasClass  active            select   select detach          if  button height     button offset   top     window  height     0 4  gt    window  height              select insertBefore button           select css  margin-top    -44vh            select css  top    0            else           select insertAfter button           select css  margin-top                select css  top    40px                      select slideToggle        button toggleClass  active              x000D   container     width  200px    position  relative    top  0    left  0    right  0    height  auto      nested-select-box     font-family  Arial  Helvetica  sans-serif    display  block    position  relative    width  100     height  fit-content    cursor  pointer    color   2196f3    height  40px    font-size  small       z-index  2000         nested-select-box  nested-select-button     border  1px solid  2196f3    position  absolute    width  calc 100  - 20px     padding  0 10px    min-height  40px    word-wrap  break-word    margin  0 auto    overflow  hidden      nested-select-box danger  nested-select-button     border  1px solid rgba 250  33  33  0 678       nested-select-box  nested-select-button  nested-select-title     padding-right  25px    padding-left  25px    width  calc 100  - 50px     margin  auto    height  fit-content    text-align  center    vertical-align  middle    position  absolute    top  0    bottom  0    left  0      nested-select-box  nested-select-button selected  nested-select-title     bottom  unset    top  5px      nested-select-box  nested-select-button  nested-select-title-icon     position  absolute    height  20px    width  20px    top  10px    bottom  10px    right  7px    transition  all 0 5s ease 0s      nested-select-box  nested-select-button active  nested-select-title-icon     -moz-transform  scale -1  -1     -o-transform  scale -1  -1     -webkit-transform  scale -1  -1     transform  scale -1  -1       nested-select-box  nested-select-button  nested-select-title-icon  before   nested-select-box  nested-select-button  nested-select-title-icon  after     content        background-color   2196f3    position  absolute    width  70     height  2px    transition  all 0 5s ease 0s    top  9px      nested-select-box  nested-select-button  nested-select-title-icon  before     transform  rotate 45deg     left  -1 6px      nested-select-box  nested-select-button  nested-select-title-icon  after     transform  rotate -45deg     left  7px      nested-select-box  nested-select-wrapper     width  100     top  40px    position  relative    border  1px solid  2196f3    background   ffffff    z-index  2005    opacity  1      nested-select     font-family  Arial  Helvetica  sans-serif    display  inline-block    overflow-y  scroll    max-height  40vh    width  calc 100  - 10px     padding  5px    -ms-overflow-style  none    scrollbar-width  none      nested-select  -webkit-scrollbar     display  none      nested-select a   nested-select span     padding  0 5px    border-radius  3px    cursor  pointer    text-align  start      nested-select a hover     background-color   62b2f3    color   ffffff      nested-select span hover     background-color   c4c4c4    color   ffffff      nested-select input type  radio       display  none      nested-select input type  radio   span     display  block      nested-select input type  radio   checked span     background-color   2196f3    color   ffffff      nested-select div     margin-left  15px      nested-select label gt span before   nested-select a before     content    2022     margin-right  5px      nested-select a     display  block    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt div class  container  gt     lt div class  nested-select-box w-100  gt       lt div class  nested-select-button  gt         lt p class  nested-select-title  gt          Account        lt  p gt         lt span class  nested-select-title-icon  gt  lt  span gt       lt  div gt       lt div class  nested-select-wrapper  style  display  none   gt         lt div class  nested-select  executer  on change select  gt            lt label gt           lt input title  Accounting and legal services  value  1565142000000891539  type  radio  name  nested-select-hidden-radio  gt           lt span gt Accounting and legal services lt  span gt         lt  label gt              lt label gt           lt input title  Advertising agencies  value  1565142000000891341  type  radio  name  nested-select-hidden-radio  gt           lt span gt Advertising agencies lt  span gt         lt  label gt              lt a class  nested-cell  gt Advertising And Marketing lt  a gt           lt div gt                lt label gt             lt input title  Advertising agencies  value  1565142000000891341  type  radio  name  nested-select-hidden-radio  gt             lt span gt Advertising agencies lt  span gt           lt  label gt                lt a class  nested-cell  gt Adwords - traffic lt  a gt             lt div gt                  lt label gt               lt input title  Adwords - traffic  Charters and general search  value  1565142000003929177  type  radio  name  nested-select-hidden-radio  gt               lt span gt Adwords - traffic  Charters and general search lt  span gt             lt  label gt                  lt label gt               lt input title  Adwords - traffic  Distance course  value  1565142000007821291  type  radio  name  nested-select-hidden-radio  gt               lt span gt Adwords - traffic  Distance course lt  span gt             lt  label gt                  lt label gt               lt input title  Adwords - traffic  Events  value  1565142000003929189  type  radio  name  nested-select-hidden-radio  gt               lt span gt Adwords - traffic  Events lt  span gt             lt  label gt                  lt label gt               lt input title  Adwords - traffic  Practices  value  1565142000003929165  type  radio  name  nested-select-hidden-radio  gt               lt span gt Adwords - traffic  Practices lt  span gt             lt  label gt                  lt label gt               lt input title  Adwords - traffic  Sailing tours  value  1565142000003929183  type  radio  name  nested-select-hidden-radio  gt               lt span gt Adwords - traffic  Sailing tours lt  span gt             lt  label gt                  lt label gt               lt input title  Adwords - traffic  Theoretical courses  value  1565142000003929171  type  radio  name  nested-select-hidden-radio  gt               lt span gt Adwords - traffic  Theoretical courses lt  span gt             lt  label gt                lt  div gt                lt label gt             lt input title  Branded products  value  1565142000000891533  type  radio  name  nested-select-hidden-radio  gt             lt span gt Branded products lt  span gt           lt  label gt                lt label gt             lt input title  Business cards  value  1565142000005438323  type  radio  name  nested-select-hidden-radio  gt             lt span gt Business cards lt  span gt           lt  label gt                lt a class  nested-cell  gt Facebook  Instagram - traffic lt  a gt             lt div gt                  lt label gt               lt input title  Facebook  Instagram - traffic  Charters and general search  value  1565142000003929145  type  radio  name  nested-select-hidden-radio  gt               lt span gt Facebook  Instagram - traffic  Charters and general search lt  span gt             lt  label gt                  lt label gt               lt input title  Facebook  Instagram - traffic  Distance course  value  1565142000007821285  type  radio  name  nested-select-hidden-radio  gt               lt span gt Facebook  Instagram - traffic  Distance course lt  span gt             lt  label gt                  lt label gt               lt input title  Facebook  Instagram - traffic  Events  value  1565142000003929157  type  radio  name  nested-select-hidden-radio  gt               lt span gt Facebook  Instagram - traffic  Events lt  span gt             lt  label gt                  lt label gt               lt input title  Facebook  Instagram - traffic  Practices  value  1565142000003929133  type  radio  name  nested-select-hidden-radio  gt               lt span gt Facebook  Instagram - traffic  Practices lt  span gt             lt  label gt                  lt label gt               lt input title  Facebook  Instagram - traffic  Sailing tours  value  1565142000003929151  type  radio  name  nested-select-hidden-radio  gt               lt span gt Facebook  Instagram - traffic  Sailing tours lt  span gt             lt  label gt                  lt label gt               lt input title  Facebook  Instagram - traffic  Theoretical courses  value  1565142000003929139  type  radio  name  nested-select-hidden-radio  gt               lt span gt Facebook  Instagram - traffic  Theoretical courses lt  span gt             lt  label gt                lt  div gt                lt label gt             lt input title  Offline Advertising  posters  banners  partnerships   value  1565142000000891377  type  radio  name  nested-select-hidden-radio  gt             lt span gt Offline Advertising  posters  banners  partnerships  lt  span gt           lt  label gt                lt label gt             lt input title  Photos  video etc   value  1565142000000891371  type  radio  name  nested-select-hidden-radio  gt             lt span gt Photos  video etc  lt  span gt           lt  label gt                lt label gt             lt input title  Prize fund  value  1565142000001404931  type  radio  name  nested-select-hidden-radio  gt             lt span gt Prize fund lt  span gt           lt  label gt                lt label gt             lt input title  SEO  value  1565142000000891365  type  radio  name  nested-select-hidden-radio  gt             lt span gt SEO lt  span gt           lt  label gt                lt label gt             lt input title  SMM Content creation  texts  copywriting   value  1565142000000891389  type  radio  name  nested-select-hidden-radio  gt             lt span gt SMM Content creation  texts  copywriting  lt  span gt           lt  label gt                lt a class  nested-cell  gt YouTube lt  a gt             lt div gt                  lt label gt               lt input title  YouTube  travel expenses  value  1565142000008100163  type  radio  name  nested-select-hidden-radio  gt               lt span gt YouTube  travel expenses lt  span gt             lt  label gt                  lt label gt               lt input title  Youtube  video editing  value  1565142000008100157  type  radio  name  nested-select-hidden-radio  gt               lt span gt Youtube  video editing lt  span gt             lt  label gt                lt  div gt              lt  div gt          lt  div gt       lt  div gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   lt style gt  x000D     NestedSelect display  inline-block  height  100px  border  1px Black solid  overflow-y  scroll   x000D     NestedSelect label display  block  cursor  pointer   x000D     NestedSelect label hover background-color   0092ff  color  White   x000D     NestedSelect input type  radio   display  none   x000D     NestedSelect input type  radio     span display  block  padding-left  0px  padding-right  5px   x000D     NestedSelect input type  radio   checked   span background-color  Black  color  White   x000D     NestedSelect div margin-left  15px  border-left  1px Black solid   x000D     NestedSelect label  gt  span before content   -     x000D   lt  style gt  x000D   x000D   lt div class  NestedSelect  gt  x000D     lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Fruit lt  span gt  lt  label gt  x000D     lt div gt  x000D       lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Apple lt  span gt  lt  label gt  x000D       lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Banana lt  span gt  lt  label gt  x000D       lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Orange lt  span gt  lt  label gt  x000D     lt  div gt  x000D   x000D     lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Drink lt  span gt  lt  label gt  x000D     lt div gt  x000D       lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Water lt  span gt  lt  label gt  x000D   x000D       lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Soft lt  span gt  lt  label gt  x000D       lt div gt  x000D         lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Cola lt  span gt  lt  label gt  x000D         lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Soda lt  span gt  lt  label gt  x000D         lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Lemonade lt  span gt  lt  label gt  x000D       lt  div gt  x000D   x000D       lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Hard lt  span gt  lt  label gt  x000D       lt div gt  x000D         lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Bear lt  span gt  lt  label gt  x000D         lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Whisky lt  span gt  lt  label gt  x000D         lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Vodka lt  span gt  lt  label gt  x000D         lt label gt  lt input type  radio  name  MySelectInputName  gt  lt span gt Gin lt  span gt  lt  label gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The HTML spec here is really broken  It should allow nested optgroups and recommend user agents render them as nested menus  Instead  only one optgroup level is allowed  However  they do have to say the following on the subject      Note  Implementors are advised that future versions of HTML may extend the grouping mechanism to allow for nested groups  i e   OPTGROUP elements may nest   This will allow authors to represent a richer hierarchy of choices    And user agents could start using submenus to render optgoups instead of displaying titles before the first option element in an optgroup as they do now

User · Answer

I really like the Broken Arrow s solution above in this post  I have just improved changed it a bit so that what was called labels can be toggled and are not considered options  I have used a small piece of jQuery  but this could be done without jQuery   I have replaced intermediate labels  no leaf labels  with links  which call a function on click  This function is in charge of toggling the next div of the clicked link  so that it expands collapses the options  This avoids the possibility of selecting an intermediate element in the hierarchy  which usually is something desired  Making a variant that allows to select intermediate elements should be easy   This is the modified html    lt div class  NestedSelect  gt       lt a onclick  toggleDiv this   gt Fruit lt  a gt       lt div gt           lt label gt               lt input type  radio  name  MySelectInputName  gt  lt span gt Apple lt  span gt  lt  label gt           lt label gt               lt input type  radio  name  MySelectInputName  gt  lt span gt Banana lt  span gt  lt  label gt           lt label gt               lt input type  radio  name  MySelectInputName  gt  lt span gt Orange lt  span gt  lt  label gt       lt  div gt        lt a onclick  toggleDiv this   gt Drink lt  a gt       lt div gt           lt label gt               lt input type  radio  name  MySelectInputName  gt  lt span gt Water lt  span gt  lt  label gt            lt a onclick  toggleDiv this   gt Soft lt  a gt           lt div gt               lt label gt                   lt input type  radio  name  MySelectInputName  gt  lt span gt Cola lt  span gt  lt  label gt               lt label gt                   lt input type  radio  name  MySelectInputName  gt  lt span gt Soda lt  span gt  lt  label gt               lt label gt                   lt input type  radio  name  MySelectInputName  gt  lt span gt Lemonade lt  span gt  lt  label gt           lt  div gt            lt a onclick  toggleDiv this   gt Hard lt  a gt           lt div gt               lt label gt                   lt input type  radio  name  MySelectInputName  gt  lt span gt Bear lt  span gt  lt  label gt               lt label gt                   lt input type  radio  name  MySelectInputName  gt  lt span gt Whisky lt  span gt  lt  label gt               lt label gt                   lt input type  radio  name  MySelectInputName  gt  lt span gt Vodka lt  span gt  lt  label gt               lt label gt                   lt input type  radio  name  MySelectInputName  gt  lt span gt Gin lt  span gt  lt  label gt           lt  div gt       lt  div gt   lt  div gt    A small javascript jQuery function   function toggleDiv element          element  next  div   toggle  medium        And the css    NestedSelect       display  inline-block      height  100       border  1px Black solid      overflow-y  scroll      NestedSelect a hover   NestedSelect span hover        background-color   0092ff      color  White      cursor  pointer      NestedSelect input type  radio         display  none      NestedSelect input type  radio     span       display  block      padding-left  0px      padding-right  5px      NestedSelect input type  radio   checked   span       background-color  Black      color  White      NestedSelect div       display  none      margin-left  15px      border-left  1px black     solid      NestedSelect label  gt  span before   NestedSelect a before      content   -        NestedSelect a       display  block      Running sample in JSFiddle

User · Answer

Ok  if anyone ever reads this  the best option is to add four  amp nbsp s at each extra level of indentation  it would seem   so   x000D   x000D   lt select gt  x000D    lt optgroup label  Level One  gt  x000D     lt option gt  A 1  lt  option gt  x000D     lt optgroup label   amp nbsp  amp nbsp  amp nbsp  amp nbsp Level Two  gt  x000D      lt option gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp  A B 1  lt  option gt  x000D     lt  optgroup gt  x000D     lt option gt  A 2  lt  option gt  x000D    lt  optgroup gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I know this was quite a while ago  however I have a little extra to add   This is not possible in HTML5 or any previous specs  nor is it proposed in HTML5 1 yet  I have made a request to the public-html-comments mailing list  but we ll see if anything comes of it   Regardless  whilst this is not possible using  lt select gt  yet  you can achieve a similar effect with the following HTML  plus some CSS for prettiness    x000D   x000D   lt ul gt  x000D     lt li gt  x000D    lt input type  radio  name  location  value  0  id  loc 0    gt  x000D    lt label for  loc 0  gt United States lt  label gt  x000D    lt ul gt  x000D      lt li gt  x000D    Northeast x000D           lt ul gt  x000D          lt li gt  x000D      lt input type  radio  name  location  value  1  id  loc 1    gt  x000D      lt label for  loc 1  gt New Hampshire lt  label gt  x000D       lt  li gt  x000D             lt li gt  x000D      lt input type  radio  name  location  value  2  id  loc 2    gt  x000D      lt label for  loc 2  gt Vermont lt  label gt  x000D       lt  li gt  x000D             lt li gt  x000D       lt input type  radio  name  location  value  3  id  loc 3    gt  x000D       lt label for  loc 3  gt Maine lt  label gt  x000D       lt  li gt  x000D      lt  ul gt  x000D       lt  li gt  x000D          lt li gt  x000D       Southeast x000D              lt ul gt  x000D       lt li gt  x000D       lt input type  radio  name  location  value  4  id  loc 4    gt  x000D       lt label for  loc 4  gt Georgia lt  label gt  x000D       lt  li gt  x000D                lt li gt  x000D       lt input type  radio  name  location  value  5  id  loc 5    gt  x000D       lt label for  loc 5  gt Alabama lt  label gt  x000D       lt  li gt  x000D        lt  ul gt  x000D     lt  li gt  x000D      lt  ul gt  x000D       lt  li gt  x000D       lt li gt  x000D       lt input type  radio  name  location  value  6  id  loc 6    gt  x000D       lt label for  loc 6  gt Canada lt  label gt  x000D          lt ul gt  x000D       lt li gt  x000D       lt input type  radio  name  location  value  7  id  loc 7    gt  x000D       lt label for  loc 7  gt Ontario lt  label gt  x000D       lt  li gt  x000D             lt li gt  x000D        lt input type  radio  name  location  value  8  id  loc 8    gt  x000D           lt label for  loc 8  gt Quebec lt  label gt  x000D       lt  li gt  x000D             lt li gt  x000D         lt input type  radio  name  location  value  9  id  loc 9    gt  x000D         lt label for  loc 9  gt Manitoba lt  label gt  x000D       lt  li gt  x000D     lt  ul gt  x000D     lt  li gt  x000D     lt  ul gt  x000D   x000D   x000D    As an extra added benefit  this also means you can allow selection of the  lt optgroups gt  themselves  This might be useful if you had  for example  nested categories where the categories go into heavy detail and you want to allow users to select higher up in the hierarchy   This will all work without JavaScript  however you might wish to add some to hide the radio buttons and then change the background color of the selected item or something   Bear in mind  this is far from a perfect solution  but if you absolutely need a nested select with reasonable cross-browser compatibility  this is probably as close as you re going to get

User · Answer

This is just fine but if you add option which is not in optgroup it gets buggy     x000D   x000D   lt select gt  x000D     lt optgroup label  Level One  gt  x000D       lt option gt  A 1  lt  option gt  x000D       lt optgroup label   amp nbsp  amp nbsp  amp nbsp  amp nbsp Level Two  gt  x000D         lt option gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp  A B 1  lt  option gt  x000D       lt  optgroup gt  x000D       lt option gt  A 2  lt  option gt  x000D     lt  optgroup gt  x000D     lt option gt  A  lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    Would be much better if you used css and close optgroup right away     x000D   x000D   lt select gt  x000D     lt optgroup label  Level One  gt  lt  optgroup gt  x000D     lt option style  padding-left 15px  gt  A 1  lt  option gt  x000D     lt optgroup label  Level Two  style  padding-left 15px  gt  lt  optgroup gt  x000D     lt option style  padding-left 30px  gt  A B 1  lt  option gt  x000D     lt option style  padding-left 15px  gt  A 2  lt  option gt  x000D     lt option gt  A  lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

[html] Nesting optgroups in a dropdownlist/select

Examples related to html

Examples related to optgroup