Multiple values from a dropdown issue

Question

So far i have a dropdown which each has a corresponding number which works just fine. Each number also has a corresponding trait also which will be placed in the 4th column. So what i'm trying to ask is can the dropdown have two values attached to it (a number and a trait) or should I break it up into two parts (1: dropwdown displays a number & 2: number displays a trait)? and how to do that please and thanks you.

JS

$('#warmth').change(function () {
                $('#warmthVal').val(this.value);
            });

HTML

<table>
       <tr>
           <td><b>Factors</b></td>
           <td><b>Sten Score</b></td>
           <td><b>1-10</b></td>
           <td><b>Personality Traits</b></td>
       </tr>
       <tr>
           <td>Warmth (A)</td>
           <td>
              <select name="warmth" id="warmth">
                 <option value="">...</option>
                 <option value="1">0-4</option>     //trait1
                 <option value="2">5-6</option>     //trait2
                 <option value="3">7-9</option>     //trait3
                 <option value="4">10-11</option>   //trait4
                 <option value="5">12-14</option>   //trait5
                 <option value="6">15-16</option>   //trait6
                 <option value="7">17-18</option>   //trait7
                 <option value="8">19-20</option>   //trait8
                 <option value="9">21-22</option>   //trait9
              </select>
            </td>
            <td>
               <input type="text" id="warmthVal" name="sten" disabled size="1" />
             </td>
             <td>
               <input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
             </td>
         </tr>
</table>

possible duplicate of [Adding additional data to select options using jQuery](http://stackoverflow.com/questions/4564659/adding-additional-data-to-select-options-using-jquery) — Rick S, Aug 03 '15 at 14:15
You can use `datasets` like `data-value='trait 1'` in your elements and select it inside your function using `.attr("data-value")`. — Mouser, Aug 03 '15 at 14:19

score 1 · Accepted Answer · answered Aug 03 '15 at 14:21

You can bind additional values to your DOM elements using data attributes. Here is how you do that.

JS

$('#warmth').change(function () {
    $('#warmthVal').val(this.value);
    $('#warmthTrait').val($(this).data("trait"));
});

HTML

<table>
       <tr>
           <td><b>Factors</b></td>
           <td><b>Sten Score</b></td>
           <td><b>1-10</b></td>
           <td><b>Personality Traits</b></td>
       </tr>
       <tr>
           <td>Warmth (A)</td>
           <td>
              <select name="warmth" id="warmth">
                 <option value="">...</option>
                 <option data-trait="trait1" value="1">0-4</option>     //trait1
                 <option data-trait="trait2" value="2">5-6</option>     //trait2
                 <option data-trait="trait3" value="3">7-9</option>     //trait3
                 <option data-trait="trait4" value="4">10-11</option>   //trait4
                 <option data-trait="trait5" value="5">12-14</option>   //trait5
                 ...
              </select>
            </td>
            <td>
               <input type="text" id="warmthVal" name="sten" disabled size="1" />
             </td>
             <td>
               <input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
             </td>
         </tr>
</table>

Hope it helps.

Multiple values from a dropdown issue

1 Answers1