There are several ways to accomplish this, but probably the most basic would be to use a hidden field of the alignment to help control what options are displayed in the Deity drop down. It looks like this: html <select name="attr_alignment">
<option value="good" selected>Good</option>
<option value="neutral">Neutral</option>
<option value="evil">Evil</option>
</select>
<input type="hidden" class="alignment" name="attr_alignment" value="good" />
<select name="attr_deity">
<option class="good neutral evil" value="none">Select a Deity</option>
<option class="good neutral" value="Balfor">Good Neutral</option>
<option class="good" value="Buren">Good</option>
<option class="evil" value="Blinken">Evil</option>
<option class="neutral" value="neutral">Neutral</option>
<option class="neutral evil" value="neutral Evil">Neutral Evil</option>
</select> CSS (not using legacy Sanitization): .alignment[value="good"] ~ select > option:not([class~="good"]) {
display: none;
}
.alignment[value="neutral"] ~ select > option:not([class~="neutral"]) {
display: none;
}
.alignment[value="evil"] ~ select > option:not([class~="evil"]) {
display: none;
} That method isn't perfect, for example, it won't hide an option that's selected, so if the character started with the alignment of Good, and then had it changed to Evil, selecting Evil in the Alignment wouldn't unselect or hide the option of the currently selected Good deity, but once they click on the drop down the good deity would be hidden.