我有一张<td>的桌子,住的是<select><options>.

我想创建一个对我的Django后端的请求,并单击选项的值,并在所单击的<option>行中显示主机名.

我的JavaScript可以显示<option>的值,但我不知道如何访问主机名.

$(function (e) {
  $(".form-select").change(function (event) {
    alert(this.value); //shows the Value of the selected Option
    for(var i = 0; i < this.options.length; i++){ //deselect the option
      this.options[i].selected = false;
    }
  });
});
<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">Vulnerabilites</th>

    </tr>
  </thead>
  <tbody>

    <tr>
      <td class="Rechnernummer"><a href="javascript:void(0)" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" 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)" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" 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>

推荐答案

您可以从事件处理程序中的"当前"元素"遍历DOM",向上遍历到公共父元素,然后向下遍历到您正在寻找的"相邻"元素.例如:

$(function (e) {
  $(".form-select").change(function (event) {
    alert(this.value); //shows the Value of the selected Option
    alert($(this).closest('tr').find('td.Rechnernummer a').text()); // shows the Hostname

    // etc.
  });
});

使用.closest() Select 第一个匹配的父元素(向上遍历DOM),然后.find() Select 该元素中的匹配元素(向后遍历DOM).

Javascript相关问答推荐

详细说明如何以图表方式改变仪表的范围和 colored颜色

订阅操作顺序

调用SEARCH函数后,程序不会结束

添加/删除时React图像上传重新渲染上传的图像

积分计算和 colored颜色 判断错误

我的glb文件没有加载到我的three.js文件中

无法将nPM simplex-noise包导入在JS项目中工作

使用redux-toolet DelivercThunks刷新访问令牌

如何避免移动设备中出现虚假调整大小事件?

类型脚本中只有字符串或数字键而不是符号键的对象

useNavigation更改URL,但不呈现或显示组件

仅针对RTK查询中的未经授权的错误取消maxRetries

如何调用名称在字符串中的实例方法?

如何避免页面第一次加载时由于CSS样式通过JavaScript更改而出现闪烁

Chart.js-显示值应该在其中的引用区域

我可以使用空手道用户界面来获取网页的当前滚动位置吗?

为什么我的getAsFile()方法返回空?

检索相加到点的子项

在Reaction中的handleSubmit按钮内,useSelector值仍然为空

将Node.js包发布到GitHub包-错误ENEEDAUTH