如何根据下拉列表中的选定选项设置隐藏字段的值？

Question

我在 JQuery 中创建了下拉列表，我从数组中读取值和名称。该部分工作正常，现在我想为我放置在我的选择标签上方的隐藏字段设置值。因此，每次更改选项时，我都必须为该隐藏字段设置不同的值。这是我的代码：

HTML：

<td>
    <input type="hidden" id="userID" name="user" value=""/>
    <select id="selUser" name="selUser">
        <option value="">--Select Student--</option>
    </select>
</td>

JQuery:

    $( document ).ready(function() {
       var userValues = [];

       userValues.push({'idOne':"31",'idTwo':"Tom, Poitras",'idThree':"88"});
       userValues.push({'idOne':"16",'idTwo':"All, Dirks",'idThree':"89"});
       userValues.push({'idOne':"15",'idTwo':"John, Reed",'idThree':"50"});

       for(var i=0; i < studValues.length; i++){
          $('#selUser').append('<option value='+userValues[i].idOne+'>'+userValues[i].idTwo+'</option>');
       }    
});

在下拉列表中选择学生后，如何设置隐藏值（数组中的 idThree）？我应该为此提供其他功能还是针对此问题有其他方法？如果有人可以提供帮助，请告诉我。

Answer 1

我建议使用 jQuery 的 .change() 事件。

这里的文档： https://api.jquery.com/change/

document.ready() 函数中的$('#selUser').change(function() { // what you want to do here }); 之类的东西会将匿名事件附加到下拉列表中。