Selection keeps changing based on options with similar value

So I have a drop down menu for selecting your class. Each fighter classes and subclasses have a modifier to fatigue, while others don't thats what the values are. So I set up the options so they had a value associated with it. Problem is that if I select Cleric, Mage, Mage/Thief, Thief and then re-open the character sheet has changed back to assassin. If I select a value with -2 then it changes back to the ranger every time. What do I do?           <div class="sheet-col-1-4"><select name="attr_class_fatigue">                 <option value="0">Assassin</option>                 <option value="-2">Barbarian</option>                 <option value="0">Cleric</option>                 <option value="-2">Fighter</option>                 <option value="-1">Fighter/Mage</option>                 <option value="-1">Fighter/Thief</option>                 <option value="-2">Knight</option>                 <option value="0">Mage</option>                 <option value="0">Mage/Thief</option>                 <option value="-2">Paladin</option>                 <option value="-2">Ranger</option>                 <option value="0">Rogue</option>                 <option value="0">Thief</option>             </select><br/>Class</div>

I think only unique values are recognized within a select input.  Meaning all options with a value="0" are essentially the same.  Obviously you could simply put all the value="0" classes together, all "-2" classes together, etc.  Or, (shot in the dark) use math in the value to create unique option value. ie to create unique options for "0" without actually changing the value. option value="0" option value="0+0" option value="1-1" Another option is to create hidden attributes for each class with the appropriate value, then refrence the hidden attribute in your select's options instead of the number.  ie <input type="hidden" name="attr_cleric_class_adjustment" value="0" /> Then on your select option option value="@{cleric_class_adjustment}"

Yeah, I would combine your entries like this:         <div class="sheet-col-1-4">             <select name="attr_class_fatigue">                 <option value="0">Assassin, Cleric, Mage, Mage/Thief, Rogue, Thief</option>                 <option value="-1">Fighter/Mage, Fighter/Thief</option>                 <option value="-2">Barbarian, Fighter, Knight, Paladin, Ranger</option>             </select><br/>Class</div>

Vince is correct. You must use unique values in a select. Vince has a clever idea for getting around that, I wonder if it works. The more traditional method would be to use a sheet worker which returns the modifier.  First change your Select to <div class="sheet-col-1-4"><select name="attr_class">                 <option selected>(Choose)</option>                 <option >Assassin</option>                 <option >Barbarian</option>                 <option >Cleric</option>                 <option >Fighter</option>                 <option >Fighter/Mage</option>                 <option >Fighter/Thief</option>                 <option >Knight</option>                 <option >Mage</option>                 <option >Mage/Thief</option>                 <option >Paladin</option>                 <option >Ranger</option>                 <option >Rogue</option>                 <option >Thief</option>             </select>             <input type="hidden" name="attr_class_fatigue" value="0" /> <br/>Class</div> And then use the following sheet worker: on('change:class', () => {     getAttrs(['class'], v => {         const classes = {             '(Choose)': 0, Assassin: 0, Barbarian: -2, Cleric: 0, Fighter: -2,              'Fighter/Mage': -1, 'Fighter/Thief': -1, 'Knight': -2, 'Mage':0,              'Mage/Thief': 0, 'Paladin' :-2, Ranger: -2, Rogue: 0, Thief: 0         };         const modifier = v.class || 0;         setAttrs({             class_fatigue: modifier         });     }); }); If you're already using the attribute name class anywhere, just change it in the select, and the sheet worker (1st, 2nd, and 8th line) to whatever you choose. And of course, if you are setting class with the same names as these elsewhere, you might be able to do away with the select completely. Just keep tthe hidden input.

I did a quick test on my weird suggestion above to "create unique options for "0" without actually changing the value." seems to work. In my test below, the value remained "0" for all options and I was able to get the select to "stick" on whichever selection I made. Select Test: <select name="attr_select_option1"> <option value="0">Option A</option> <option value="0+0">Option B</option> <option value="0+0+0">Option C</option> </select> Value:<input name="attr_select_option1_value" value="@{select_option1}" disabled /> Looks strange, but you might try this to see if it works <div class="sheet-col-1-4"> <select name="attr_class_fatigue"> <option value="0">Assassin</option> <option value="-2">Barbarian</option> <option value="0+0">Cleric</option> <option value="-2+0">Fighter</option> <option value="-1">Fighter/Mage</option> <option value="-1+0">Fighter/Thief</option> <option value="-2+0+0">Knight</option> <option value="0+0+0">Mage</option> <option value="0+0+0+0">Mage/Thief</option> <option value="-2+0+0+0">Paladin</option> <option value="-2+0+0+0+0">Ranger</option> <option value="0+0+0+0+0">Rogue</option> <option value="0+0+0+0+0+0">Thief</option> </select><br/>Class </div>

Vince said: I did a quick test on my weird suggestion above to "create unique options for "0" without actually changing the value." seems to work. In my test below, the value remained "0" for all options and I was able to get the select to "stick" on whichever selection I made. Select Test: <select name="attr_select_option1"> <option value="0">Option A</option> <option value="0+0">Option B</option> <option value="0+0+0">Option C</option> </select> Value:<input name="attr_select_option1_value" value="@{select_option1}" disabled /> Looks strange, but you might try this to see if it works <div class="sheet-col-1-4"> <select name="attr_class_fatigue"> <option value="0">Assassin</option> <option value="-2">Barbarian</option> <option value="0+0">Cleric</option> <option value="-2+0">Fighter</option> <option value="-1">Fighter/Mage</option> <option value="-1+0">Fighter/Thief</option> <option value="-2+0+0">Knight</option> <option value="0+0+0">Mage</option> <option value="0+0+0+0">Mage/Thief</option> <option value="-2+0+0+0">Paladin</option> <option value="-2+0+0+0+0">Ranger</option> <option value="0+0+0+0+0">Rogue</option> <option value="0+0+0+0+0+0">Thief</option> </select><br/>Class </div> Thats awesome! Good shenanigans!