jQuery - poignée événement de changement de la balise SELECT dans le tableau cellule

Question

Je suis nouveau à jQuery et je cette table avec menu déroulant dans une cellule, j'ai connaissance nulle comment saisir l'événement du « changement » pour chaque. Ce que je veux, c'est que lors de l'événement de changement de l'élément sélectionné de chaque liste déroulante, je dois mettre à jour la base de cellule suivante correspondante sur la valeur sélectionnée de la liste déroulante. J'ai essayé de gérer l'événement pour chaque contrôle en utilisant des ID, mais avec ce genre de contrôle dynamique, je n'ai aucune idée. J'ai un peu de connaissances mais pas beaucoup.

Answer 1

/* Bind Change Event to Select (First) */ 
 
$('select.first').on('change', function() { 
 
    /* Set Value to Variable */ 
 
    var selectedText = $(this).val(); 
 
    
 
    /* Append Variable as Text to Next <td/> */ 
 
    $(this).parents('td').next().text(selectedText); 
 
}).change(); // Run Change on Init 
 

 
/* Bind Change Event to Select (Second) */ 
 
$('select.second').on('change', function() { 
 
    /* Set Value to Variable */ 
 
    var selectedText = $(this).val(); 
 
    
 
    /* Append Variable as Text to 2nd <td/> */ 
 
    $(this).parents('td').nextAll().eq(1).text(selectedText); 
 
}).change(); // Run Change on Init 
 

 
/* Bind Change Event to Select (Target Class) */ 
 
$('select.targetClass').on('change', function() { 
 
    /* Set Value to Variable */ 
 
    var selectedText = $(this).val(); 
 
    
 
    /* Append Variable as Text to <td.targetedClass/> */ 
 
    $(this).parents('td').siblings('.targetedClass').text(selectedText); 
 
}).change(); // Run Change on Init

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
     <tr> 
 
      <td>Select</td> 
 
      <td>First</td> 
 
      <td>Second</td> 
 
      <td>Class</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td> 
 
       <select class="first"> 
 
        <option>Test 1</option> 
 
        <option>Test 2</option> 
 
        <option>Test 3</option> 
 
        <option>Test 4</option> 
 
       </select> 
 
      </td> 
 
      <td></td> 
 
      <td></td> 
 
      <td class="targetedClass"></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <select class="second"> 
 
        <option>Test 1</option> 
 
        <option>Test 2</option> 
 
        <option>Test 3</option> 
 
        <option>Test 4</option> 
 
       </select> 
 
      </td> 
 
      <td></td> 
 
      <td></td> 
 
      <td class="targetedClass"></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <select class="first"> 
 
        <option>Test 1</option> 
 
        <option>Test 2</option> 
 
        <option>Test 3</option> 
 
        <option>Test 4</option> 
 
       </select> 
 
      </td> 
 
      <td></td> 
 
      <td></td> 
 
      <td class="targetedClass"></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <select class="second"> 
 
        <option>Test 1</option> 
 
        <option>Test 2</option> 
 
        <option>Test 3</option> 
 
        <option>Test 4</option> 
 
       </select> 
 
      </td> 
 
      <td></td> 
 
      <td></td> 
 
      <td class="targetedClass"></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <select class="targetClass"> 
 
        <option>Test 1</option> 
 
        <option>Test 2</option> 
 
        <option>Test 3</option> 
 
        <option>Test 4</option> 
 
       </select> 
 
      </td> 
 
      <td></td> 
 
      <td></td> 
 
      <td class="targetedClass"></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

S'il vous plaît essayez ce qui suit.

$("#id of your select drop down ").change(function() { 
     alert($('#id of your drop down option:selected').val()); 
    $('#id of your input').val($('#id of your drop down option:selected').val()); 

    });