jQueryの - 私はjQueryのに新たなんだと私は細胞内のドロップダウンで、このテーブルを持って

Question

表のセル内のSELECTタグの変更イベントを処理し、私はのための「変更」のイベントをつかむためにどのようにゼロ知識を持っています各。 ドロップダウンの選択された値に対応する次のセルのベースを更新するために必要な、各ドロップダウンの選択された項目を変更するイベントが発生しました。 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()); 

    });