Dropdown Menu same raw value changes back to top list item

Question

Ok guys.  I have such a weird issue.  I have some code as follows from a dropdown menu:
<items>
                     <text>Zeutering</text>
                     <text>Rabies 1 Year (Dog or Cat)</text>
                     <text>Puppy Pack (DAPPv and Dewormer)</text>
                     <text>Kitten Pack (HCP+FeLV and Dewormer)</text>
                     <text>Adult Dog Pack 1 (Rabies, DAPPvL2+CV and Dewormer)</text>
                     <text>Adult Cat Pack 1 (Rabies, HCP+FeLV, and Dewormer)</text>
                     <text>Deluxe Adult Dog Pack (Rabies, DAPPvL2+CV, Bordatella, and Dewormer)</text>
                     <text>Heartworm Pack (Heartworm test + six months of prevention)</text>
                     <text>Microchip (Home Again Chip)</text>
                     <text>Flea and Tick Medications</text>
                  </items>
                  <items save="1" presence="hidden">
                     <text>65.00</text>
                     <text>10.00</text>
                     <text>20.00</text>
                     <text>25.00</text>
                     <text>35.00</text>
                     <text>35.00</text>
                     <text>50.00</text>
                     <text>95.00</text>
                     <text>30.00</text>
                     <text>10</text>
                  </items>
The problem I am having is this.  When I select  <text>Adult Cat Pack 1 (Rabies, HCP+FeLV, and Dewormer)</text>  from the dropdown menu the option goes to   <text>Adult Dog Pack 1 (Rabies, DAPPvL2+CV and Dewormer)</text>   which is the option above the option I selected as noted above.  The only thing I can think of is that because they have the same value it is causing this to happen.  I've never had an issue like this before with dropdown menus so I'm not sure how to fix it.
Any help is much appreciated.
Justin

Answer 1

Hi Justin,
You are right, the dropdown only works if the values are unique.  So one fix would be to add something to the value making it unique and then striping it off when selected.  So if your values were;
            <items save="1" presence="hidden">
               <text>65.00:1</text>
               <text>10.00:2</text>
               <text>20.00:3</text>
               <text>25.00:4</text>
               <text>35.00:5</text>
               <text>35.00:6</text>
               <text>50.00:7</text>
               <text>95.00:8</text>
               <text>30.00:9</text>
               <text>10:10</text>
            </items>
In the change event you could have some JavaScript code something like;
var valueId = this.boundItem(xfa.event.newText);
app.alert(parseFloat(valueId));
The parseFloat function will stop parsing when it hits an invalid character like the colon.
It is tempting to use a natural key (as you have) but I would probably have used a surrogate key (that is something only the form knows about, like 1,2,3, etc) and then look it up in some structure maybe as simple as a JavaScript array, depends on the complexity of your form.
Hope this helps,
Bruce