Question

到目前为止，我有一个下拉列表，每个下拉列表都有一个相应的数字，工作正常。每个数字也有相应的特征，也将放在第4列。所以我想问的是下拉列表是否附加了两个值（一个数字和一个特征），或者我应该将它分成两部分（1：dropwdown显示一个数字＆amp; 2：数字显示一个特征）？如何做到这一点，谢谢你。

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>

Answer 1

您可以使用数据属性将其他值绑定到DOM元素。这是你如何做到的。

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>

希望它有所帮助。

下拉列表问题中的多个值

1 个答案: