Question

我有一个类似下面的表格。该表以dinamically方式填充，因此它可以有更多行。每行都选择一个以＆＃34; _＆＃34;结尾的id命名的输入元素。 +行数。

当选择一个选项时，它应该加载所选人员的地址，并将其放在被点击的选择旁边。

我如何在jquery中使用单个函数来识别使用了哪个选项，因此我知道在哪一行中包含数据库的结果。

例如：我在第二行中选择Sam选择。该函数应检测这发生的行，然后我将调用数据库并将返回的数据放在第二行输入中。

＆＃13;

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

＆＃13;

Answer 1

您希望明智地使用this关键字。

当javascript处理事件（例如，select.change）时，您可以使用<tr>关键字来确定哪个选项已更改。从那里你可以使用html元素的相对位置来定位，例如，选择所在的$('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')); });。

快速示例（请注意，TR ID只是必需的，因为我在警报中显示它们）：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 2

您可以在每个选择中添加类似.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>

然后在更改事件上使用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)
   });
});

如何识别jquery中的元素以调用单个函数

2 个答案: