Custom Sheet : Repeating section with dynamic select options

Hello all! I am bringing up a question that was asked 5 years ago and that was said to be not doable at that time ( <a href="https://app.roll20.net/forum/post/3106818/sheet-worker-dynamic-select-box-replacing-options-onchange" rel="nofollow">https://app.roll20.net/forum/post/3106818/sheet-worker-dynamic-select-box-replacing-options-onchange</a> ). I am trying to have two "select" that are linked, in the sense that the selected option in the first determines what options are available in the second. This will be used for inventory management. Depending on the two choices, this will create items with the relevant sets of stats, uses, etc. For example, my helm shoud not be destroyed after one use, but my potion should. I started my work from this webpage:&nbsp; <a href="https://www.dyn-web.com/tutorials/forms/select/paired.php" rel="nofollow">https://www.dyn-web.com/tutorials/forms/select/paired.php</a> &nbsp;. Here's what the HTML looks like :&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt; fieldset &nbsp; class = "repeating_items" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; select &nbsp; name = "item_category" &nbsp; class = "item_category" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; option &nbsp; value = "item_category_equip" &gt; Equipment &lt;/ option &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; option &nbsp; value = "item_category_resource" &gt; Resources&nbsp;&amp;&nbsp;Crafting &lt;/ option &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; option &nbsp; value = "item_category_consumable" &gt; Consumables &lt;/ option &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; option &nbsp; value = "item_category_other" &gt; Quest&nbsp;&amp;&nbsp;Other &lt;/ option &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ select &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt; select &nbsp; name = "item_subcategory" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!--&nbsp;<a href="https://www.dyn-web.com/tutorials/forms/select/paired.php&nbsp;populated&nbsp;using&nbsp;JavaScript&nbsp;--" rel="nofollow">https://www.dyn-web.com/tutorials/forms/select/paired.php&nbsp;populated&nbsp;using&nbsp;JavaScript&nbsp;--</a>&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ select &gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;/ fieldset &gt; Here's the Javascript: ar &nbsp; Select_Item_Subcategory &nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; 'item_subcategory' : &nbsp;{&nbsp; //&nbsp;name&nbsp;of&nbsp;associated&nbsp;select&nbsp;box &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;names&nbsp;match&nbsp;option&nbsp;values&nbsp;in&nbsp;controlling&nbsp;select&nbsp;box &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; item_category_equip : &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text : &nbsp;[ "Weapon" ,&nbsp; "Armor" ,&nbsp; "Shield" ,&nbsp; "Helm" ,&nbsp; "Cape" ,&nbsp; "Gloves" ,&nbsp; "Boots" ,&nbsp; "Ring" ,&nbsp; "Charm" ,&nbsp; "Amulet" ], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; value : &nbsp;[ 'equip_subcategory_weapon' ,&nbsp; 'equip_subcategory_armor' ,&nbsp; 'equip_subcategory_shield' ,&nbsp; 'equip_subcategory_helm' ,&nbsp; 'equip_subcategory_cape' ,&nbsp; "equip_subcategory_gloves" ,&nbsp; "equip_subcategory_boots" ,&nbsp; "equip_subcategory_ring" ,&nbsp; "equip_subcategory_charm" ,&nbsp; "equip_subcategory_amulet" ] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; item_category_resource : &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text : &nbsp;[ "Metal" ,&nbsp; "Leather" ,&nbsp; "Wood" ,&nbsp; "Fiber" ,&nbsp; "Gem" ,&nbsp; "Plant" ,&nbsp; "Red&nbsp;Ingredient" ,&nbsp; "Green&nbsp;Ingredient" ,&nbsp; "Blue&nbsp;Ingredient" ,&nbsp; "Acid" ,&nbsp; "Fertilizer" ,&nbsp; "Thickener" ,&nbsp; "Weird&nbsp;Rock" ], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; value : &nbsp;[ 'resource_subcategory_metal' ,&nbsp; "resource_subcategory_leather" ,&nbsp; 'resource_subcategory_wood' ,&nbsp; 'resource_subcategory_fiber' ,&nbsp; "resource_subcategory_gem" ,&nbsp; "resource_subcategory_plant" ,&nbsp; "resource_subcategory_red" ,&nbsp; "resource_subcategory_green" ,&nbsp; "resource_subcategory_blue" ,&nbsp; "resource_subcategory_acid" ,&nbsp; "resource_subcategory_fertilizer" ,&nbsp; "resource_subcategory_thickener" ,&nbsp; "resource_subcategory_weirdrock" ] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; item_category_consumable : &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text : &nbsp;[ "Health&nbsp;Potion" ,&nbsp; "Stamina&nbsp;Potion" ,&nbsp; "Magic&nbsp;Potion" ,&nbsp; "Enhancer" ,&nbsp; "Oil" ,&nbsp; "Bomb" ,&nbsp; "Morpher" ], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; value : &nbsp;[ "consumable_subcategory_health" ,&nbsp; "consumable_subcategory_stamina" ,&nbsp; "consumable_subcategory_magic" ,&nbsp; "consumable_subcategory_enhancer" ,&nbsp; "consumable_subcategory_oil" ,&nbsp; "consumable_subcategory_bomb" ,&nbsp; "consumable_subcategory_morpher" ] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; item_category_other : &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text : &nbsp;[ "Light&nbsp;Source" ,&nbsp; "Crafting&nbsp;Tools" ,&nbsp; "Rope" ,&nbsp; "Quest&nbsp;Item" ], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; value : &nbsp;[ "other_subcategory_light" ,&nbsp; "other_subcategory_crafting" ,&nbsp; "other_subcategory_rope" ,&nbsp; "other_subcategory_quest" ] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} }; //&nbsp;removes&nbsp;all&nbsp;option&nbsp;elements&nbsp;in&nbsp;select&nbsp;box&nbsp; function &nbsp; removeAllOptions ( sel )&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; var &nbsp; len ,&nbsp; par ; &nbsp;&nbsp;&nbsp;&nbsp; len &nbsp;=&nbsp; sel . options . length ; &nbsp;&nbsp;&nbsp;&nbsp; for &nbsp;( var &nbsp; i &nbsp;=&nbsp; len ;&nbsp; i ;&nbsp; i --)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; par &nbsp;=&nbsp; sel . options [ i &nbsp;-&nbsp; 1 ]. parentNode ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; par . removeChild ( sel . options [ i &nbsp;-&nbsp; 1 ]); &nbsp;&nbsp;&nbsp;&nbsp;} } //&nbsp;adds&nbsp;the&nbsp;options&nbsp;to&nbsp;the&nbsp;select&nbsp;box function &nbsp; appendDataToSelect ( sel ,&nbsp; obj )&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; var &nbsp; f &nbsp;=&nbsp; document . createDocumentFragment (); &nbsp;&nbsp;&nbsp;&nbsp; var &nbsp; opts ; &nbsp;&nbsp;&nbsp;&nbsp; function &nbsp; addOptions ( obj )&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var &nbsp; f &nbsp;=&nbsp; document . createDocumentFragment (); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var &nbsp; o ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for &nbsp;( var &nbsp; i &nbsp;=&nbsp; 0 ,&nbsp; len &nbsp;=&nbsp; obj . text . length ;&nbsp; i &nbsp;&lt;&nbsp; len ;&nbsp; i ++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; o &nbsp;=&nbsp; document . createElement ( 'option' ); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; o . appendChild ( document . createTextNode ( obj . text [ i ])); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if &nbsp;( obj . value )&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; o . value &nbsp;=&nbsp; obj . value [ i ]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; f . appendChild ( o ); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return &nbsp; f ; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp; opts &nbsp;=&nbsp; addOptions ( obj ); &nbsp;&nbsp;&nbsp;&nbsp; f . appendChild ( opts ); &nbsp;&nbsp;&nbsp;&nbsp; sel . appendChild ( f ); } //&nbsp;anonymous&nbsp;function&nbsp;assigned&nbsp;to&nbsp;onchange&nbsp;event&nbsp;of&nbsp;controlling&nbsp;select&nbsp;box document . forms [ 'equip_form' ]. elements [ 'item_category' ]. onchange &nbsp;=&nbsp; function ( e )&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;name&nbsp;of&nbsp;associated&nbsp;select&nbsp;box &nbsp;&nbsp;&nbsp;&nbsp; var &nbsp; relName &nbsp;=&nbsp; 'item_subcategory' ; &nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;reference&nbsp;to&nbsp;associated&nbsp;select&nbsp;box&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; var &nbsp; relList &nbsp;=&nbsp; this . form . elements [ relName ]; &nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;get&nbsp;data&nbsp;from&nbsp;object&nbsp;literal&nbsp;based&nbsp;on&nbsp;selection&nbsp;in&nbsp;controlling&nbsp;select&nbsp;box&nbsp;(this.value) &nbsp;&nbsp;&nbsp;&nbsp; var &nbsp; obj &nbsp;=&nbsp; Select_Item_Subcategory [ relName ][ this . value ]; &nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;remove&nbsp;current&nbsp;option&nbsp;elements &nbsp;&nbsp;&nbsp;&nbsp; removeAllOptions ( relList ); &nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;call&nbsp;function&nbsp;to&nbsp;add&nbsp;optgroup/option&nbsp;elements &nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;pass&nbsp;reference&nbsp;to&nbsp;associated&nbsp;select&nbsp;box&nbsp;and&nbsp;data&nbsp;for&nbsp;new&nbsp;options &nbsp;&nbsp;&nbsp;&nbsp; appendDataToSelect ( relList ,&nbsp; obj ); }; Is something like this now feasible? If it is not, is there a convenient workaround for my players? I am fine hardcoding stuff if need be. Or maybe there's another approach to inventory creation/destruction that works well? Thanks!

You still can't affect the DOM with sheet workers. But...is the second drop down completely dynamic or is it kind of like a static list or three different static lists? &nbsp;Because what you could do, would be have the different static drop down lists created and hide them all and only show the one based on the selection in the first. That wouldn't even, necessarily, require a sheet worker to do.

Hey @Finderski, I think that would work! There are fours different static lists. If the player selects Equipment in the first list, the second list will always be&nbsp;["Weapon", "Armor", "Shield", "Helm", "Cape", "Gloves", "Boots", "Ring", "Charm", "Amulet"]. I am not familiar with HTML so I'm not sure how to correctly google this. Would you happen to have a link to a page that could help me get there? Thanks again for your suggestion, I'll let you know how it turns out!

Sheetworkers still do not have access to the DOM on roll20, but as pointed out by Chris B in the included link, you should be able to hide/show sections of the sheet based on the item_category option selected.&nbsp; If I recall..., you might have to use hidden radio or checkbox inputs that duplicate your&nbsp;item_category options that the CSS can use to hide/show your sub-sections.&nbsp; example; html &lt;select name="attr_item_category" class="sheet-item_category"&gt; &lt;option value="item_category_equip" selected &gt;Equipment&lt;/option&gt; &lt;option value="item_category_resource"&gt;Resources &amp; Crafting&lt;/option&gt; &lt;option value="item_category_consumable"&gt;Consumables&lt;/option&gt; &lt;option value="item_category_other"&gt;Quest &amp; Other&lt;/option&gt; &lt;/select&gt; &lt;input type="checkbox" name="attr_item_category" class="sheet-hidden" value="item_category_equip" checked /&gt; &lt;input type="checkbox" name="attr_item_category" class="sheet-hidden" value="item_category_resource" /&gt; &lt;input type="checkbox" name="attr_item_category" class="sheet-hidden" value="item_category_consumable" /&gt; &lt;input type="checkbox" name="attr_item_category" class="sheet-hidden" value="item_category_other" /&gt; &lt;div class="sheet-item_category_equip"&gt;EQUIPMENT&lt;/div&gt; &lt;div class="sheet-item_category_resource"&gt;RESOURCES&lt;/div&gt; &lt;div class="sheet-item_category_consumable"&gt;CONSUMABLE&lt;/div&gt; &lt;div class="sheet-item_category_other"&gt;OTHER&lt;/div&gt; css div.sheet-item_category_equip, div.sheet-item_category_resource, div.sheet-item_category_consumable, div.sheet-item_category_other { display:none; } input[value="item_category_equip"]:checked ~ div.sheet-item_category_equip, input[value="item_category_resource"]:checked ~ div.sheet-item_category_resource, input[value="item_category_consumable"]:checked ~ div.sheet-item_category_consumable, input[value="item_category_other"]:checked ~ div.sheet-item_category_other { display:block; } .sheet-hidden { display:none; }

The CSS Wizardry page on the Wiki, the section on Swap Areas, should describe what Vince and Finderski are talking about too.

Vince, I havent seen this done in quite this way before: input[value="item_category_equip"]:checked ~ div.sheet-item_category_equip, input[value="item_category_resource"]:checked ~ div.sheet-item_category_resource, input[value="item_category_consumable"]:checked ~ div.sheet-item_category_consumable, input[value="item_category_other"]:checked ~ div.sheet-item_category_other { display:block; } It's very convoluted but clever. It took me a few minutes to figure out how it worked. using that approach, the selected setting on the select tag didnt work for me. New sheets opened didnt have the equipment section visible, and i had to switch to another option then switch back to see it. This approach did work properly for me: HTML: &lt;select&nbsp;name="attr_item_category"&nbsp;class="sheet-item_category"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="item_category_equip"&nbsp;selected&nbsp;&gt;Equipment&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="item_category_resource"&gt;Resources&nbsp;&amp;&nbsp;Crafting&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="item_category_consumable"&gt;Consumables&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="item_category_other"&gt;Quest&nbsp;&amp;&nbsp;Other&lt;/option&gt; &lt;/select&gt; &lt;input&nbsp;type="hidden"&nbsp;name="attr_item_category"&nbsp;class="category-selector"&nbsp;value="item_category_equip"&nbsp;/&gt; &lt;div&nbsp;class="sheet-item_category_equip"&gt;EQUIPMENT&lt;/div&gt; &lt;div&nbsp;class="sheet-item_category_resource"&gt;RESOURCES&lt;/div&gt; &lt;div&nbsp;class="sheet-item_category_consumable"&gt;CONSUMABLE&lt;/div&gt; &lt;div&nbsp;class="sheet-item_category_other"&gt;OTHER&lt;/div&gt; CSS: div.sheet-item_category_equip, div.sheet-item_category_resource, div.sheet-item_category_consumable, div.sheet-item_category_other&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:none; } input.sheet-category-selector[value="item_category_equip"]&nbsp;~&nbsp;div.sheet-item_category_equip, input.sheet-category-selector[value="item_category_resource"]&nbsp;~&nbsp;div.sheet-item_category_resource, input.sheet-category-selector[value="item_category_consumable"]&nbsp;~&nbsp;div.sheet-item_category_consumable, input.sheet-category-selector[value="item_category_other"]&nbsp;~&nbsp;div.sheet-item_category_other&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:block; }

GiGs said: Vince, I havent seen this done in quite this way before: input[value="item_category_equip"]:checked ~ div.sheet-item_category_equip, input[value="item_category_resource"]:checked ~ div.sheet-item_category_resource, input[value="item_category_consumable"]:checked ~ div.sheet-item_category_consumable, input[value="item_category_other"]:checked ~ div.sheet-item_category_other { display:block; } It's very convoluted but clever. It took me a few minutes to figure out how it worked. using that approach, the selected setting on the select tag didnt work for me. New sheets opened didnt have the equipment section visible, and i had to switch to another option then switch back to see it. Convoluted is my middle name. ;-) Yea, I suppose I should have included a default "checked" on the first input to match the select's option.&nbsp; At least I think that would do it. (I'll update my example above) &lt;input type="checkbox" name="attr_item_category" class="sheet-hidden" value="item_category_equip" checked /&gt; I like your example better since it's more succinct.&nbsp;&nbsp;

Oh yes, of course, setting checked would fix it. The reason it didnt work is a checkbox value isnt its actual value, its a potential value - what the value becomes when checked.

Sorry it took me so long to reply to this. Vince's post from the 12th got me far enough for my sheet to be usable, but I haven't had a chance to look at his replies or GiGs' after that. I will check them out (hopefully soon) and report back. Thanks again folks, it would've taken me ages to figure any of this out. Cheers!