From a quick glance, I suspect that the problem is the hidden input is not at the correct level in the hierarchy. Also you've needlessly complicated things by using divs and spans both as containers, and having one inside the other. Lets look at this: <div class="classtoggletargeting"> <span class="baseclasstarget"> <label>Base Class:</label> <input type="hidden" name="attr_baseclass" class="toggle-specializationprestige"> <select class="long-text-input" type="text" name="attr_baseclass"> <option value="none" selected>Choose</option> <option value="archer">Archer</option> <option value="beguiler">Beguiler</option> <option value="druid">Druid</option> <option value="guardian">Guardian</option> <option value="maestra">Maestra (Not Ready)</option> <option value="mage">Mage</option> <option value="rectora">Rectora</option> <option value="pugilist">Pugilist (Not Ready)</option> <option value="rogue">Rogue</option> <option value="spellbreaker">Spellbreaker (Not Ready)</option> <option value="summoner">Summoner</option> <option value="warrior">Warrior (Not Ready)</option> </select> </span> </div> Why do you have a span inside a div here? You should just have: <div class="classtoggletargeting baseclasstarget"> <label>Base Class:</label> <input type="hidden" name="attr_baseclass" class="toggle-specializationprestige"> <select class="long-text-input" type="text" name="attr_baseclass"> <option value="none" selected>Choose</option> <option value="archer">Archer</option> <option value="beguiler">Beguiler</option> <option value="druid">Druid</option> <option value="guardian">Guardian</option> <option value="maestra">Maestra (Not Ready)</option> <option value="mage">Mage</option> <option value="rectora">Rectora</option> <option value="pugilist">Pugilist (Not Ready)</option> <option value="rogue">Rogue</option> <option value="spellbreaker">Spellbreaker (Not Ready)</option> <option value="summoner">Summoner</option> <option value="warrior">Warrior (Not Ready)</option> </select> </div> I;m not sure if you need both classes, but I moved the spans class into the divs just in case. You can assign multiple classes to a tag, by separating them with a space, and this is often very handy. Furthermore, do these actually need to be inside a container at all? Is there CSS formatting or layout you are applying to this group as a set? The grid layout maybe? If so then keep it as a div - but move the input out of it, like so <div class="classtoggletargeting baseclasstarget"> <label>Base Class:</label> <select class="long-text-input" type="text" name="attr_baseclass"> <option value="none" selected>Choose</option> <option value="archer">Archer</option> <option value="beguiler">Beguiler</option> <option value="druid">Druid</option> <option value="guardian">Guardian</option> <option value="maestra">Maestra (Not Ready)</option> <option value="mage">Mage</option> <option value="rectora">Rectora</option> <option value="pugilist">Pugilist (Not Ready)</option> <option value="rogue">Rogue</option> <option value="spellbreaker">Spellbreaker (Not Ready)</option> <option value="summoner">Summoner</option> <option value="warrior">Warrior (Not Ready)</option> </select> </div>
<input type="hidden" name="attr_baseclass" class="toggle-specializationprestige">
This places the input on the same level as the specialisation-archer div, and since you want to affect that div, that's where it needs to be. Note that you can place that input anywhere in the sheet. It will have the same attribute value as the select, no matter where you put it. So you put it where it needs to be to make the CSS work.