jQuery事件处理：在表格下拉菜单选择时获取同行的其他单元格数据

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table">
  <thead>
    <tr>
      <th scope="col">Hostname</th>
      <th scope="col">User</th>
      <th scope="col">Vulnerabilities</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="Rechnernummer"><a href="javascript:void(0)" onclick="clientInfo(event);">Host001</a></td>
      <td class="User">User001</td>
      <td class="Vulnerabilites">
        <select class="form-select" size="4">
          <option value="2705">Security Vulnerability CVE-2018-1285 for log4net</option>
          <option value="73562">Security Vulnerability CVE-2022-39427 in VirtualBox</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="Rechnernummer"><a href="javascript:void(0)" onclick="clientInfo(event);">Host002</a></td>
      <td class="User">User002</td>
      <td class="Vulnerabilites">
        <select class="form-select" size="4">
          <option value="68069">Security Vulnerability CVE-2021-34803 for TeamViewer</option>
          <option value="74465">Security Vulnerability CVE-2023-21899 in VirtualBox</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

$(function () {
  // 监听所有class为'form-select'的下拉菜单的change事件
  $(".form-select").change(function () {
    // 1. 获取选中的option的值
    var selectedOptionValue = this.value;
    console.log("选中的漏洞ID:", selectedOptionValue);

    // 2. 从当前<select>元素开始，向上找到最近的<tr>祖先元素
    var $currentRow = $(this).closest('tr');

    // 3. 在找到的<tr>内部，向下查找class为'Rechnernummer'的<td>中的<a>元素的文本内容
    var hostname = $currentRow.find('td.Rechnernummer a').text();
    console.log("对应的主机名:", hostname);

    // 至此，您已成功获取到选中的漏洞ID和对应的主机名。
    // 您可以根据业务需求，将这两个值发送到Django后端或其他服务。
    // 例如：
    // sendDataToBackend(selectedOptionValue, hostname);

    // 注意：原问题中的循环取消选中逻辑通常不适用于change事件，
    // 因为change事件触发后，下拉菜单通常会保持选中状态。
    // 如果有特殊需求，请根据实际情况调整。
  });
});