optgroup issue

So I've been trying to clean up one of my dropdowns by using optgroup. However, though it previews just fine, when I go live with it, the dropdown ignores the optgroups and merely populates a standard dropdown list. I've checked and rechecked my code and unless I'm missing something, everything should be correct. Here is my snippet of code. Hoping someone can shed some light on this issue for me:                     <label>Culture</label>                     <select style="width:90%;color:black;" type="text" name="attr_culture" placeholder="Select Culture">                         <option hidden disabled selected value> -- Select a Culture -- </option>                         <optgroup label="Human">                             <option value="Stormlander">Stormlander</option>                             <option value="Mittlander">Mittlander</option>                             <option value="Viranns">Viranns</option>                             <option value="Wildfolk">Wildfolk</option>                         </optgroup>                         <optgroup label="Elves">                             <option value="Korpikalli">Korpikalli</option>                             <option value="Illmalaini">Illmalaini</option>                         </optgroup>                         <optgroup label="Dwarves">                             <option value="Buratja">Buratja</option>                             <option value="Borjornikkas">Borjornikkas</option>                         </optgroup>                         <optgroup label="Half-trolls">                             <option value="Changelings">Changelings</option>                             <option value="Gray Brute">Gray Brute</option>                             <option value="Ogro">Ogro</option>                         </optgroup>                         <optgroup label="Half-elves">                             <option value="Dyfirs">Dyfirs</option>                             <option value="Barkbrule">Barkbrule</option>                         </optgroup>                         <optgroup label="Dwarf-troll">                             <option value="Zvordas">Zvordas</option>                         </optgroup>                     </select>

I don't think Optgroup is a container. Try this instead: <optgroup label="Human"></optgroup> <option value="Stormlander">Stormlander</option> <option value="Mittlander">Mittlander</option> <option value="Viranns">Viranns</option> <option value="Wildfolk">Wildfolk</option> EDIT: I just checked and I am incorrect; Optgroup is a container and should work as you have it.

Yeah. As I said, every indication is that I've entered the information in correctly. Using the custom sheet editor in Roll20 and viewing the preview even shows it working properly. However, once I go live into the room and pull up a character sheet, all of the optgroups have disappeared and instead I have a long list of all the cultures. I'm stumped as to why this is happening.

Have you tried removing  <option hidden disabled selected value> -- Select a Culture -- </option> and see if it works then? Wouldn't be surprised if it's breaking things, as whatever it's trying to do isn't something I'm used to seeing with sheets. Or maybe it must have the value at least as value="" , for some roll20-specific reason. never seen a <select> on a a roll20 sheet use type="text" either Take a look at the Free Spacer Sheet, that one or working uses of optgroups.

Tried removing the hidden/disabled, etc entire line but no effect. Have even tried putting that line in it's own optgroup. This line basically just creates a placeholder line in the selection that disappears as an option once the first selection is actually made. Have tried with and without values both numeric and values=listed culture. For the sake of trying everything, I also tried with each value being changed to the optgroup it was part of. The type="text" was a holdover from previously when it was just a text field that I missed but removal changed nothing. The funny thing is that it works perfectly in the preview. It's just going live where it breaks and I find it extremely odd. From everything that I can see, it should  work. I looked over the Free Spacer sheet and there doesn't seem to be anything but cosmetic differences between that and what I have. Additionally, I copy/pasted the entire selection area of the Free Spacer sheet and replaced mine with it to test it for completionist sake. When I then tried to run the new sheet, the same thing happened. I'm guessing now that the break is somewhere else on the sheet and is not actually tied in directly there. Unfortunately, I can't for the life of me think where that break might be. EDIT: In case anyone needed to know, changing the value of each selection to the optgroup ended up not only doing nothing but breaking a sheet worker I had that checked each culture for relevant modifiers to stats as well. Live and learn on that one.

The funny thing is that it works perfectly in the preview. It's just going live where it breaks and I find it extremely odd. From everything that I can see, it should &nbsp;work. Yes, it's odd, but NEVER trust the preview, it's a weirdo. <a href="https://wiki.roll20.net/Building_Character_Sheets#Common_Mistakes" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets#Common_Mistakes</a> nr. 4 Just to be sure, did you also try all 3 things at the same time , not just separately when you used the browser web dev inspector, did it give you any clues? When I ran this snippet through a validator, it also pointed out select doesn't have placeholders. <a href="https://validator.w3.org/nu/" rel="nofollow">https://validator.w3.org/nu/</a> Additionally, I copy/pasted the entire selection area of the Free Spacer sheet and replaced mine with it to test it for completionist sake. When I then tried to run the new sheet, the same thing happened. I'm guessing now that the break is somewhere else on the sheet and is not actually tied in directly there. Unfortunately, I can't for the life of me think where that break might be. Yeah, this make it sound the true problem lies elsewhere. btw, I think sheetworkers can't edit attributes that are disabled. if you had sweetworkers changing the select.

Yes, all three things and there was no change. The interesting thing here is that when I pop out the sheet and go to the section to figure out what's going on, the optgroup container isn't showing up. Obviously, this is an issue. However, I can't figure out why &nbsp;it's suddenly decided to divest itself of &lt;optgroup&gt; and the devtools give no reason why it's been removed. I noticed the placeholder when I was going through making edits to try and figure it out and removed it prior to altering the code. It was another of the holdbacks from when it was originally a text field. The sheetworker's only function is to plug in some numbers to some a couple of autocalculated fields that change dependent upon your culture. It's just a very minor thing that allows me to ignore a couple stats that are important but I didn't want to force the players or myself to have to figure out during character creation when they can easily be automated.

Okay, I'm stumped. Tried to place only a cleaned up version of that in a sheet, no other code, and neither with our without legacy sanitation checked did this work. And yes, seems the Free Spacer sheet's thing still works, for whatever reason.

So the question now becomes, "What the heck did Free Spacer do that was so different or is Free Spacer the fluke?" Funnily, this is a sheet I picked work back up on after having been unable to work on it for quite some time. I remember for a fact &nbsp;that this was working previously. However, as you said, with and without legacy sanitation it fails to do so now. And I can't understand why &nbsp;it wipes optgroup out once it starts translating the sheet to the live game. BTW, I also edited the html through the devtools onto the sheet as it was up and placing optgroup in at that point works so we know the language is recognized still. It's just that somewhere in the translation of the code to the sheet that it gets lost.

Are you using CSE or Legacy sanitization?

Finderski said: Are you using CSE or Legacy sanitization? I didn't get a cleaned up optgroup example to work with either , using the Sheet Editor. Didn't try it with the Sandbox though. &lt;select name="attr_culture"&gt; &lt;optgroup label="Human"&gt; &lt;option value="Stormlander"&gt;Stormlander&lt;/option&gt; &lt;option value="Mittlander"&gt;Mittlander&lt;/option&gt; &lt;option value="Viranns"&gt;Viranns&lt;/option&gt; &lt;option value="Wildfolk"&gt;Wildfolk&lt;/option&gt; &lt;/optgroup&gt; &lt;optgroup label="Elves"&gt; &lt;option value="Korpikalli"&gt;Korpikalli&lt;/option&gt; &lt;option value="Illmalaini"&gt;Illmalaini&lt;/option&gt; &lt;/optgroup&gt; &lt;optgroup label="Dwarves"&gt; &lt;option value="Buratja"&gt;Buratja&lt;/option&gt; &lt;option value="Borjornikkas"&gt;Borjornikkas&lt;/option&gt; &lt;/optgroup&gt; &lt;optgroup label="Half-trolls"&gt; &lt;option value="Changelings"&gt;Changelings&lt;/option&gt; &lt;option value="Gray Brute"&gt;Gray Brute&lt;/option&gt; &lt;option value="Ogro"&gt;Ogro&lt;/option&gt; &lt;/optgroup&gt; &lt;optgroup label="Half-elves"&gt; &lt;option value="Dyfirs"&gt;Dyfirs&lt;/option&gt; &lt;option value="Barkbrule"&gt;Barkbrule&lt;/option&gt; &lt;/optgroup&gt; &lt;optgroup label="Dwarf-troll"&gt; &lt;option value="Zvordas"&gt;Zvordas&lt;/option&gt; &lt;/optgroup&gt; &lt;/select&gt;

I reported the problem 4 months ago in this thread <a href="https://app.roll20.net/forum/post/9620705/optgroup-elements-missing-in-sandbox-vs-live-server/?pageforid=9620705#post-9620705" rel="nofollow">https://app.roll20.net/forum/post/9620705/optgroup-elements-missing-in-sandbox-vs-live-server/?pageforid=9620705#post-9620705</a> ... which has been closed without any feedback from the Roll20 folks

Okay, time for one of us to make a proper bug report on this. Linking this an the previous two threads in the rapport, and mentioning that somehow they stil work on the Free Spacer sheet. I didn't know this had been mentioned on the forums before. <a href="https://help.roll20.net/hc/en-us/requests/new?ticket_form_id=1500000234201" rel="nofollow">https://help.roll20.net/hc/en-us/requests/new?ticket_form_id=1500000234201</a>

@Andreas&nbsp; Ahem... Reporting bugs on the forums dedicated to reporting bugs and that are supposedly monitored by people on Roll20's payroll is not enough ? We must also do their ticketing job ? What the f*ck ? When I reported the issue, the optgroup elements were wiped out in the sandbox only. Now they are also wiped out from the live campaign. Sanitization ? What a joke... The CSE update may be Character Sheet Enhancements for Roll20, but for me and my group (and a lot of other groups), it is Character Shit Extended...

I'm glad i was not the only having an issue with this. I have a similar snippet that isn't showing my&nbsp;optgroup either, i do hope this issue gets resolved

Finderski said: Are you using CSE or Legacy sanitization? Andreas J. said: I didn't get a cleaned up optgroup example to work with either , using the Sheet Editor. I tried previously with both as well. I know that &lt;optgroup&gt; has been an issue in sandbox for a while but, as I said, I remember it working previously with live. VinnxDiagram said: I'm glad i was not the only having an issue with this. I have a similar snippet that isn't showing my&nbsp;optgroup either, i do hope this issue gets resolved I agree. It seems like a minor issue but for character sheets, the ability to use optgroup helps immensely &nbsp;for dropdowns when you have a wide and varied selection like the cultures available in Trudvang Chronicles .

I am so glad I did a search and found you lot had noticed this already. Saved me a lot of head scratching! Now I just hope Roll20 fix it quickly.

So, I've come up with something that I'm wondering if it's possible. I'm hoping I can create a situation in which the selection from the first drop down would then edit the second drop down. I know you can sort of do this with checkboxes if you use checkboxes for the race and then follow it up with custom drop downs for each. I'm hoping to modify that so that the initial selection is done with a dropdown instead of checkboxes or radio buttons. I know that the original CSS for using the checkboxes would basically be: (Please keep in mind this is my rough estimate and WILL NOT work as typed here. Just putting out what I have and asking for help modifying it if possible.) input.sheet-dwarf:checked ~ div.sheet-dwarf, input.sheet-dwarf-troll:checked ~ div.sheet-dwarf-troll, input.sheet-elf:checked ~ div.sheet-elf, input.sheet-half-elf:checked ~ div.sheet-half-elf, input.sheet-half-troll:checked ~ div.sheet-half-troll, input.sheet-human:checked ~ div.sheet-human, And my select would be something like: &lt;select name="attr_race" class="sheet-race"&gt; &lt;option value="dwarf"&gt;Dwarf&lt;/option&gt; &lt;option value="dwarf-troll"&gt;Dwarf-Troll&lt;/option&gt; &lt;option value="elf"&gt;Elf&lt;/option&gt; &lt;option value="half-elf"&gt;Half-Elf&lt;/option&gt; &lt;option value="half-troll"&gt;Half-Troll&lt;/option&gt; &lt;option value="human"&gt;Human&lt;/option&gt; &lt;/select&gt; With the next select being something like: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-culture sheet-dwarf" style="padding-left:44px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select class="sheet-culture sheet-culture-paddings" name="attr_culture"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Buratja"&gt;Buratja&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Borjornikkas"&gt;Borjornikkas&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-culture sheet-dwarf-troll" style="padding-left:9px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select class="sheet-culture sheet-culture-paddings" name="attr_culture"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Zvorda"&gt;Zvorda&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-culture sheet-elf" style="padding-left:67px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select class="sheet-culture sheet-culture-paddings" name="attr_culture"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Korpikalli"&gt;Korpikalli&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Illmalaini"&gt;Illmalaini&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-culture sheet-half-elf" style="padding-left:13px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select class="sheet-culture sheet-culture-paddings" name="attr_culture"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Dyfir"&gt;Dyfir&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Barkbrule"&gt;Barkbrule&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-culture sheet-half-troll" style="padding-left:14px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select class="sheet-culture sheet-culture-paddings" name="attr_culture"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Changeling"&gt;Changeling&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Gray Brute"&gt;Gray Brute&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Ogro"&gt;Ogro&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="sheet-culture sheet-human" style="padding-left:33px"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;select class="sheet-culture sheet-culture-paddings" name="attr_culture"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Stormlander"&gt;Stormlander&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Mittlander"&gt;Mittlander&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="Virann"&gt;Virann&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;option value="wildfolk"&gt;Wildfolk&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/select&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt; So the big question to be answered first, I guess, is "Is it even possible, without API, to use a dropdown menu to modify the options in a second dropdown menu?" Then: "If it is, how badly have I mangled this and what do I need to do to actually make it work?"

So the big question to be answered first, I guess, is "Is it even possible, without API, to use a dropdown menu to modify the options in a second dropdown menu?" Then: "If it is, how badly have I mangled this and what do I need to do to actually make it work?" Yes, I'd think so. You would do it the way you started writing your code, by having the subraces for each race in a separate div, and then using the value of a hidden input to determine which section is shown, instead of the :checked condition. In the future, it's best you make a separate thread when asking for help, and not replying to other threads, unless it's exactly the same issue. This thread discussed bugs related to how select works, so people could have missed your question had I not subscribed for notification to this thread. The following code should work pretty much right away, I rewrote it as minimized to save time, you should get the pattern. Also updated the wiki, so the CSS Wizardry page now have a similar, dropdown-based example of how to hide/show different areas . &lt;select name="attr_race" class="sheet-race"&gt; &lt;option value="dwarf"&gt;Dwarf&lt;/option&gt; &lt;option value="elf"&gt;Elf&lt;/option&gt; &lt;option value="human"&gt;Human&lt;/option&gt; &lt;/select&gt; &lt;!-- whatever code --&gt; &lt;div class="sheet-subrace-options"&gt; &lt;input type="hidden" class="sheet-subrace-selection" value="human"&gt; &lt;div class="sheet-culture sheet-dwarf" style="padding-left:44px"&gt; &lt;select class="sheet-culture sheet-culture-paddings" name="attr_culture"&gt; &lt;option value="Buratja"&gt;Buratja&lt;/option&gt; &lt;option value="Borjornikkas"&gt;Borjornikkas&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="sheet-culture sheet-elf" style="padding-left:67px"&gt; &lt;select class="sheet-culture sheet-culture-paddings" name="attr_culture"&gt; &lt;option value="Korpikalli"&gt;Korpikalli&lt;/option&gt; &lt;option value="Illmalaini"&gt;Illmalaini&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="sheet-culture sheet-human" style="padding-left:33px"&gt; &lt;select class="sheet-culture sheet-culture-paddings" name="attr_culture"&gt; &lt;option value="Stormlander"&gt;Stormlander&lt;/option&gt; &lt;option value="Mittlander"&gt;Mittlander&lt;/option&gt; &lt;option value="Virann"&gt;Virann&lt;/option&gt; &lt;option value="wildfolk"&gt;Wildfolk&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; div.sheet-dwarf, div.sheet-elf, div.sheet-human{ display: none; } input.sheet-subrace-selection[value="dwarf"]~ div.sheet-dwarf, input.sheet-subrace-selection[value="elf"]~ div.sheet-elf, input.sheet-subrace-selection[value="human"]~ div.sheet-human{ display: block; } If you enjoy my help, and like the sheet coding documentation (which I've written about half), you can support me on patreon .

Andreas J. said: In the future, it's best you make a separate thread when asking for help, and not replying to other threads, unless it's exactly the same issue. This thread discussed bugs related to how select works, so people could have missed your question had I not subscribed for notification to this thread. I probably should have done that. I viewed this as a continuation of my &lt;optgroup&gt; problem and ways in which I might be able to work around that issue but, yes, it is also a completely separate issue as well and should have probably been listed as a new post with reference to my original problem. I'll give this a go and see if I can avoid mangling the issue too much. As it is, the sheet I have created for my group works perfectly fine but most of my sheets tend to be very functional and not much on pretty. This has been my attempt to make my sheets for interesting as well as functional and to make them more "automated" for my group.

Ok, got it working now and it works perfectly. It took me a minute to figure out why it wasn't working but it appears that here: &lt;input type="hidden" class="sheet-subrace-selection" value="human"&gt; The name attr was left out and I needed to change it to: &lt;input type="hidden" class="sheet-subrace-selection" name="attr_race" value="human"&gt; Thank you for your help on this.