jquery 获取在不同位置单击时的值< td>< option>< td>

j5fpnvbx  于 2023-05-28  发布在  jQuery
关注(0)|答案(3)|浏览(133)

我有一个带有<td>的表,它容纳了一个带有<options><select>
我想创建一个请求到我的Django后端,其中包含所单击的Option的值和所单击的<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>
0md85ypi

0md85ypi1#

您可以从事件处理程序中的“当前”元素“遍历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()选择第一个匹配的父元素(向上遍历DOM),然后.find()选择该元素中的匹配元素(向下遍历DOM)。

4sup72z8

4sup72z82#

您可以使用.text()函数访问所选选项文本,如

$(function (e) {
  $(".form-select").change(function (event) {
    alert(this.value); // shows the value of the selected option
    var selectedOptionText = $('option:selected', this).text(); //gets selected option text.
    console.log(selectedOptionText);
  });
});
cdmah0mi

cdmah0mi3#

我要记录在案:使用内联事件处理程序通常是not a good idea。此外,你don't really need<a href="javascript:void(0)" ...>
下面是一个例子 * 不使用JQuery*,而使用event delegation进行(更改)处理。已删除空的href。您的表缺少第二个主机的值,在示例中添加了它。

document.addEventListener(`change`, handle);

function handle(evt) {
  const currentSelector = evt.target.closest(`.form-select`);

  if (currentSelector) {
    const row = currentSelector.closest(`tr`);
    const rechnerNummer = row.querySelector(`.Rechnernummer`).textContent.trim();
    const selectedValue = currentSelector.value;
    console.clear();
    // here you can continue sending the values, 
    // for demo they are logged
    return console.log(`selected: ${
      selectedValue ?? `nothing`}; rechner#${
      rechnerNummer ?? `Empty`}`);
  }
  return true;
}
<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">Host001</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">Host002</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>

相关问题