Get Value of when clicking an

Question

I've got an Table with a <td> that is housing an <select> with <options>.

I want to create a request to my Django backend with the value of the Option clicked and the hostname in the row of the clicked <option>.

My JavaScript can show the value of the <option> but I dont know how to access the hostname.

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

score 2 · Accepted Answer · answered May 24 '23 at 11:53

You can "traverse the DOM" from the "current" element in the event handler, up to a common parent, and back down to the "neighboring" element that you're looking for. For example:

$(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.
  });
});

The use of .closest() selects the first matching parent element (traversing "up" the DOM) and then .find() selects a matching element within that element (traversing back "down" the DOM).

score 0 · Answer 2 · answered May 24 '23 at 11:55

You can access the selected option text with .text() function as

$(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);
  });
});

KooiInc · Answer 3 · 2023-05-24T14:34:00.643

For the record: it is generally not a good idea to use inline event handlers. Furthermore, you don't really need <a href="javascript:void(0)" ...>.

Here is an example not using JQuery and using event delegation for the (change) handling. The empty href was removed. Your table lacked a value for the second host, added it in the example.

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>

Get Value of when clicking an in different

3 Answers3

Get Value of when clicking an