jqueryで単一の関数を呼び出すための要素を特定する方法

Question

私は以下のような類似のテーブルを持っています。テーブルはdinamicallyので、より多くの行を持つことができます満たされています。各行には、 "_" +行数で終わるIDで指定された入力要素が選択されています。

オプションを選択すると、選択した人物のアドレスが読み込まれ、クリックされた選択肢の横に配置されます。

jqueryで1つの関数を使用して、どのセレクタが使用されたかを識別し、データベースの結果をどの行に含めるかを知ることができます。

例：私は2番目の行の選択でサムを選択します。この関数は、この行がどの列にあるのかを検出し、次にデータベースを呼び出し、返されたデータを2行目の入力に配置します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
<table id="tableAddess" class="table table-hover"> 
 
    <thead class="thead-inverse"> 
 
    <th>Name</th> 
 
    <th>Address</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <select name="name_1" id="name_1"> 
 
      <option value="0">Select</option> 
 
      <option value="1">John</option> 
 
      <option value="1">Anna</option> 
 
      <option value="1">Sam</option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="address_1" id="address_1" disabled/> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <select name="name_2" id="name_2"> 
 
      <option value="0">Select</option> 
 
      <option value="1">John</option> 
 
      <option value="1">Anna</option> 
 
      <option value="1">Sam</option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="address_2" id="address_2" disabled/> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <select name="name_3" id="name_3"> 
 
      <option value="0">Select</option> 
 
      <option value="1">John</option> 
 
      <option value="1">Anna</option> 
 
      <option value="1">Sam</option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <input type="text" name="address_3" id="address_3" disabled/> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

：

クイック例（Iアラートでそれらを表示していますので、TR IDが唯一必要であることに注意してください） 。

<tr> 
    <td> 
    <select class="select-name" name="name_1" id="name_1"> 
     <option value="0">Select</option> 
     <option value="1">John</option> 
     <option value="1">Anna</option> 
     <option value="1">Sam</option> 
    </select> 
    </td> 
    <td> 
    <input class="address-field" type="text" name="address_1" id="address_1" disabled/> 
    </td> 
</tr> 

変更イベントでjQueryを使用します。 は、私はまた、各入力フィールドに.address-fieldクラスを追加しましたので、私は使用して簡単に見つけることができます：$row.find('.address-field')はAJAX mysqlのクエリhttps://www.w3schools.com/php/php_ajax_databaseため

$('.select-name').on('change',function(){ 
    var $mySelect = $(this); 
    var $row = $mySelect.closest('tr'); // the row where this select element is in. 
    $.ajax({ 
     // blabla 
    }).done(function(response){ 
    $row.find('.address-field').val(response) 
    }); 
}); 

Answer 2

あなたは賢明thisキーワードを使用します。

javascriptがイベント（select.changeなど）を処理するときに、thisキーワードを使用して、変更された選択を判断できます。そこからhtml要素の相対位置を使用して、たとえば、そのselectが配置されている<tr>を見つけることができます。あなただけの各選択に.select-nameのようにクラスを追加することができます

$('select').on('change', function() { 
 
    // two ways to do this 
 

 
    //plain javascript - locate the tr relative to the select that was changed 
 
    var tr = this.parentNode.parentNode; 
 
    //jquery has some nice features to do this more easily/robustly 
 
    var $tr = $(this).closest('tr'); 
 

 
    alert(tr.id + " and jquery reports " + $tr.attr('id')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr id='this is TR1'><td><select><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option></select></td></tr> 
 
<tr id='this is TR2'><td><select><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option></select></td></tr> 
 
<tr id='this is TR3'><td><select><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option></select></td></tr> 
 
</table>