从下拉列表中获取已选择选项的行 ID - jQuery答案

【问题标题】：Get the row id that has selected option from dropdown - jQuery从下拉列表中获取已选择选项的行 ID - jQuery
【发布时间】：2017-01-04 09:38:07
【问题描述】：

我想要在我的项目中做的是我有一个有两行的表。

第一行有 3 列，每个 td 中都有一个下拉列表。

第二行只有 1 列。

现在，我必须从下拉列表中获取具有特定选定值的 td 的 id。

我想做的是这样的：

$("#R1C1,#R1C2,#R1C3,#R2C1").append($("#selectServices"));
     $(" #selectServices").on('change', function (){
        if($("#selectServices option:selected" ).text()=="Check In"){
            // need code to get td id from select dropdown with text as Check In
        }
     });
});

其中 R1C1 代表第 1 行第 1 列，依此类推..
selectServices 是我的下拉列表的 id
Check In 是我想要从下拉列表中选择的必填选项值

【问题讨论】：

1. ID 必须是唯一的 2. append 移动对象。您可能想要克隆它 - 请单击 <> 以创建 minimal reproducible example

标签： jquery html

【解决方案1】：

我想，这就是你要找的。检查下拉列表本身的更改所需的值。

HTML：

<table id="table-id">
  <tr>
    <td id="#R1C1">
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </td>
    <td id="#R1C2">
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </td>
    <td id="#R1C3">
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td id="#R2C1">
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </td>
  </tr>
</table>

JavaScript :

$(document).ready(function() {
  $("select").on('change', function() {
      if($(this).val() == "mercedes") {
        console.log($(this).parent()[0].id)
      }
  });
});

JSFiddle : https://jsfiddle.net/nikdtu/yk0qzd85/

【讨论】：

【解决方案2】：

您可以使用 closest() 去上到父 td 然后使用 attr() 来获得 id 属性，如：

$("#selectServices option:selected").closest('td').attr('id');

希望这会有所帮助。

【讨论】：