Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×

Show/Hide Sections based on Dropdown input?

1503901432
cypher
Pro
Sheet Author
I'm working on a character sheet and I'd like to be able to show or hide the appropriate section depending on the option selected in a dropdown.  I know I can do this with radio buttons, but I'd like to use a dropdown for this.  Any suggestions would be greatly appreciated!
1503903105
Jakob
Sheet Author
API Scripter
Put hidden (display: none) checkboxes with the same attribute name as your <select> in the same place where you would normally put your radios with value=whatever the value in the select is, with the same CSS (except type=checkbox in place of type=radio, of course), and it will work. Roll20 will automatically check the checkbox if and only if the value of the attribute is the same as the value attribute of the checkbox.
1503912763

Edited 1503915864
cypher
Pro
Sheet Author
Ok, I tried that, but it still doesn't seem to be working.  What am I missing? <select name="attr_Race"> <option value="1">Human</option>         <option value="2">Arcanan</option>         <option value="3">Forgeborn</option>         <option value="4">Shadowling</option>         <option value="5">Shan'Kai</option>         <option value="6">Thakoran</option></select>   <input class="sheet-race sheet-race1" type="checkbox" name="attr_Race" value="1"><!-- Human -->   <input class="sheet-race sheet-race2" type="checkbox" name="attr_Race" value="2"><!-- Arcanan -->   <input class="sheet-race sheet-race3" type="checkbox" name="attr_Race" value="3"><!-- Forgeborn -->   <input class="sheet-race sheet-race4" type="checkbox" name="attr_Race" value="4"><!-- Shadowling -->   <input class="sheet-race sheet-race5" type="checkbox" name="attr_Race" value="5"><!-- Shan'Kai -->   <input class="sheet-race sheet-race6" type="checkbox" name="attr_Race" value="6"><!-- Thakoran -->   <div class="sheet-racetraits-human">     Human   </div>   <div class="sheet-racetraits-arcanan">     Arcanan   </div>   <div class="sheet-racetraits-forgeborn">     Forgeborn   </div>   <div class="sheet-racetraits-shankai">     Shan'kai   </div>   <div class="sheet-racetraits-shadowling">     Shadowling   </div>   <div class="sheet-racetraits-thakoran">     Thakoran   </div> /*----------- Race Traits Display Setup -------------*/ /*this hides the contents of each section by default*/ .charsheet div[class^="sheet-racetraits"] {   display: none; } /*this shows the race traits content when the appropriate input field is selected*/ .charsheet input.sheet-race1:checked ~ div.sheet-racetraits-human, .charsheet input.sheet-race2:checked ~ div.sheet-racetraits-arcanan, .charsheet input.sheet-race3:checked ~ div.sheet-racetraits-forgeborn, .charsheet input.sheet-race4:checked ~ div.sheet-racetraits-shadowling, .charsheet input.sheet-race5:checked ~ div.sheet-racetraits-shankai, .charsheet input.sheet-race6:checked ~ div.sheet-racetraits-thakoran {   display: block; } /*this hides the button*/ .charsheet input.sheet-race {   width: 0px;   height: 0px;   opacity: 0;   display: none; } /*----------- End Race Traits Display Setup -----------*/
1503914825
Jakob
Sheet Author
API Scripter
What exactly isn't working? I can see that you haven't closed the <select>, which should lead to odd results. Also, this line:  <input class="sheet-race sheet-race1" type="checkbox" name="attr_raceTraitsRadio" value="Human"><!-- Human --> looks like an artifact (but that shouldn't affect anything). Moreover, you probably want your first checkbox checked by default, since the human race is selected by default as well.
1503916004

Edited 1503916159
cypher
Pro
Sheet Author
Thanks!  The input line you referenced was a copy-paste error; I fixed it above.  I also fixed the missing </select>, but changing the value selected in the dropdown isn't affecting the displayed section... EDIT: It is actually working; it just wasn't in the previewer for some reason.  Thanks again!
1503917648
Jakob
Sheet Author
API Scripter
cypher said: Thanks!  The input line you referenced was a copy-paste error; I fixed it above.  I also fixed the missing </select>, but changing the value selected in the dropdown isn't affecting the displayed section... EDIT: It is actually working; it just wasn't in the previewer for some reason.  Thanks again! That makes sense, attribute changes do not propagate in the preview window. One of many reasons the preview window is useless :D.
1503964301
vÍnce
Pro
Sheet Author
Jakob said: That makes sense, attribute changes do not propagate in the preview window. One of many reasons the preview window is useless :D. Amen