Span not appearing when inside option

Hello, I have an input somewhere in my Custom Character Sheet for adding inventory. And I wanted there to be an 'equipped' section with a dropdown displaying all the inventory.

on it's own, <span name="attr_inv_0"></span> displays the item, but when I put it inside an option, it just displays a blank.

Works:

<span name="attr_inv_0"></span>

Does not work:

<select id="equipped" name="attr_equipped">

<option value="inv_0"><span name="attr_inv_0"></span></option>

<option value="inv_1"><span name="attr_inv_1"></span></option>

</select>

There's no way on roll20 to have dynamic select lists. You must create the option text when the sheet is designed - once the sheet is displayed to the user, it cant be changed.

The option value can be dynamic, by setting them as an attribute value - but the displayed option cant be.

Ooof that's a shame. I was hoping the span trick could work. Thank you for the response!

You might be able to cheat by using radio buttons instead...

I'm working at the moment, but will post an example when I can...

Finderski said:

You might be able to cheat by using radio buttons instead...

I'm working at the moment, but will post an example when I can...

Tease...

Coal Powered Puppet said:

Finderski said:

You might be able to cheat by using radio buttons instead...

I'm working at the moment, but will post an example when I can...

Tease...

Absolutely...it's what makes me so darn charming... ;)

HTML:

<div class='sheet-weaponskill'>
	<label class="sheet-configlabels" data-i18n="skill">Skill</label>
	<div class="sheet-container">
		<div class="sheet-child">
			<label class="sheet-ddmenu"><input type="radio" class="sheet-select-radio sheet-fighting" name="attr_weaponskill" title="@{repeating_weapons_$#_weaponskill}" value="fighting" checked="checked" />&nbsp;<span name='attr_rfightingname'></span></label>
			<label class="sheet-ddmenu"><input type="radio" class="sheet-select-radio sheet-athletics" name="attr_weaponskill" title="@{repeating_weapons_$#_weaponskill}" value="athletics" />&nbsp;<span name='attr_rathleticsname'></span></label>
			<label class="sheet-ddmenu"><input type="radio" class="sheet-select-radio sheet-shooting" name="attr_weaponskill" title="@{repeating_weapons_$#_weaponskill}" value="shooting" />&nbsp;<span name='attr_rshootingname'></span></label>
			<label class="sheet-ddmenu"><input type="radio" class="sheet-select-radio sheet-unskilled" name="attr_weaponskill" title="@{repeating_weapons_$#_weaponskill}" value="unskilled" />&nbsp;<span data-i18n='unskilled'>Unskilled</span></label>
			<label class="sheet-ddmenu"><input type="radio" class="sheet-select-radio sheet-weirdscience" name="attr_weaponskill" title="@{repeating_weapons_$#_weaponskill}" value="weirdscience" />&nbsp;<span name='attr_rweirdsciencename'></span></label>
			<input type="hidden" class="sheet-select-radio" name="attr_weaponskill" value="fighting" />
			<div class="sheet-fighting"><span name='attr_rfightingname'></span></div>
			<div class="sheet-athletics"><span name='attr_rathleticsname'></span></div>
			<div class="sheet-shooting"><span name='attr_rshootingname'></span></div>
			<div class="sheet-unskilled"><span data-i18n='unskilled'>Unskilled</span></div>
			<div class="sheet-weirdscience"><span name='attr_rweirdsciencename'></span></div>
		</div>
	</div>
</div>

CSS:

.sheet-weaponskill {
    display: none;
}
.sheet-weapondamage,
.sheet-weaponbutton[value="0"] + .sheet-weaponskill,
.sheet-weaponbutton[value="2"] + .sheet-weaponskill {
    display: inline-block;
    margin-left: 10px;
}
.sheet-container {
    width: 100px;
    border-bottom: 1px solid black;
}
.sheet-container,
.sheet-child {
    display: inline-block;
}
.sheet-child {
    vertical-align: middle;
    width: 100px;
    height: 28px;
}
.sheet-child label {
    display: none;
    z-index: 1;
}
.sheet-ddmenu {
    font-weight: normal;
    font-size: 1em;
    width: 95%;
}
.sheet-child:hover {
    border-radius: 10px;
    background: silver;
    position:absolute;
    width: 100px;
    margin-top: -14px;
    height: auto;
    z-index: 1;
    padding: 5px;
}
.sheet-child:hover label {
    display: inline-block;
    margin-left: -5px;
}
div.sheet-fighting,
div.sheet-athletics,
div.sheet-shooting,
div.sheet-unskilled,
div.sheet-faith,
div.sheet-focus,
div.sheet-performance,
div.sheet-psionics,
div.sheet-ritual,
div.sheet-spellcasting,
div.sheet-weirdscience {
    width: 100px;
    height: 28px;
    line-height:28px;
    color: black;
    border-bottom: 1px solid black;
    text-align: center;
    display: none;
}
.sheet-child:not(:hover) input.sheet-select-radio[value="fighting"] ~ div.sheet-fighting,
.sheet-child:not(:hover) input.sheet-select-radio[value="athletics"] ~ div.sheet-athletics,
.sheet-child:not(:hover) input.sheet-select-radio[value="shooting"] ~ div.sheet-shooting,
.sheet-child:not(:hover) input.sheet-select-radio[value="unskilled"] ~ div.sheet-unskilled,
.sheet-child:not(:hover) input.sheet-select-radio[value="weirdscience"] ~ div.sheet-weirdscience {
    display: block;
}
label.sheet-ddmenu:hover {
    background-color: orange;
}
.sheet-child:hover > label.sheet-ddmenu > .sheet-select-radio:checked + span {
    font-weight: bold;
    font-size: 1em;
}

This generates a drop down list of skills I want to display and have the dynamic name displayed in the span. There are a lot of trickier things you could do with this, for example, hide skills the player doesn't have. If you want to see some trickier stuff, look at the Spells/Powers section of the Savage Worlds Tabbed sheet.

The cool thing about this method is, you can also have the "drop down" be horizontal instead of just vertical.

Very intriguing. I'll try this out when i get the chance.

Finderski said:

The cool thing about this method is, you can also have the "drop down" be horizontal instead of just vertical.

Phfft.  Come back when you get the drop down to be circular.  

But, seriously, this is good.  Thanks!

Coal Powered Puppet said:

Finderski said:

The cool thing about this method is, you can also have the "drop down" be horizontal instead of just vertical.

Phfft.  Come back when you get the drop down to be circular.  

If I were Brian, I probably could...LOL