如何識別jQuery中的元素來調用一個函數

Question

我有一個類似下面的表。這張桌子被填滿了，所以它可以有更多的行。每一行都選擇一個以id結尾的輸入元素，並以「_」結尾。

當選擇一個選項時，它應該加載所選人員的地址並將其放置在被點擊的選擇旁邊。

如何使用jquery中的單個函數來確定使用了哪個選擇，以便知道哪個行包含數據庫的結果。

例如：我在第二行select Sam選擇。該函數應該檢測這個發生在哪一行，然後我將調用數據庫並將返回的數據放在第二行輸入中。

<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

你可以只添加一個類像.select-name每個選擇。

<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> 

然後在change事件上使用jQuery。 我還添加.address-field類到每個輸入字段，所以我可以通過使用容易地找到它：$row.find('.address-field')（見下面的代碼）

$('.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元素的相對位置來查找，例如，該選擇所在的<tr>。

簡單的例子（注意，TR ID是唯一必要的，因爲我在警報顯示它們）：

$('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>