Comment définir la valeur du champ masqué en fonction de l'option sélectionnée dans la liste déroulante?

Question

J'ai ma liste déroulante créée dans JQuery où je lis les valeurs et les noms de tableau. Cette partie fonctionne bien, maintenant je voudrais définir la valeur pour le champ caché que j'ai placé au-dessus de mon tag de sélection. Donc, chaque fois que je change d'option, je dois définir une valeur différente pour ce champ caché. Voici mon code:

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>'); 
     }  
}); 

Comment puis-je mettre en valeur cachée (idThree dans mon tableau) après que je prends l'étudiant dans ma chute vers le bas? Devrais-je avoir une autre fonction pour cela ou il y a une autre approche pour ce problème? Si quelqu'un peut aider s'il vous plaît faites le moi savoir.

Answer 1

Je suggère d'utiliser l'événement .change() de jQuery.

Documentation ici: https://api.jquery.com/change/

Quelque chose comme $('#selUser').change(function() { // what you want to do here }); dans votre fonction document.ready() attacherait un événement anonyme au menu déroulant.