jQuery的 - 在表格單元格SELECT標籤的手柄改變事件

Question

我是新來的jQuery，我有這個表與小區內的下拉列表中，我有零知識如何搶「改變」的情況下，每。 我想要的是在每個下拉列表的更改選定項目的事件期間，我需要更新下拉選定值的相應下一個單元格。我已經嘗試使用ID來處理每個控件的事件，但是使用這種動態控件我沒有任何想法。

我只有一點知識，但沒有那麼多。

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

請嘗試以下方法。

$("#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()); 

    });