Javascript - How to set the value of two dropdowns by clicking on a table row?

Problem:

Further to my previous question, I’m now trying to find out a way to dynamically change the selected value of two dropdown-menus by clicking on a table row/cell, preferably located on another html page.

Contents

Problem:Solution:

The code below shows my attempt to get it to work, but it doesn’t show the values of both dropdown-menus simultaneously, instead they get blanked by each other when clicking on any table row.

Apparently, the dropdowns get affected by the columns instead of by the rows.

// Get references to the dropdown and table
const dropdowns = document.getElementById('dropdown') && ('dropdown_2');
const tableRows = document.querySelectorAll('#table td');

// Add a click event listener to each table row
tableRows.forEach(row => {
  row.addEventListener('click', function() {

    // Get the value associated with the clicked row
    const selectedValue = this.getAttribute('value');

    // Set the dropdown's value to the selected value
    dropdown.value = selectedValue;
    dropdown_2.value = selectedValue;
  });
});

<select id="dropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select id="dropdown_2">
  <option value="value1">Value 1</option>
  <option value="value2">Value 2</option>
  <option value="value3">Value 3</option>
</select>

<table border="1" cellpadding="1" cellspacing="1" id="table">
  <tr>
    <th value="">Options</th>
    <th value="">Value</th>
  </tr>
  <tr>
    <td value="option1">Option1</td>
    <td value="value1">Value1</td>
  </tr>
  <tr>
    <td value="option2">Option2</td>
    <td value="value2">Value2</td>
  </tr>
  <tr>
    <td value="option3">Option3</td>
    <td value="value3">Value3</td>
  </tr>
</table>

Solution:

The following doesn’t do what you expect:

const dropdowns = document.getElementById('dropdown')&&('dropdown_2');

It sets the value of dropdowns to the string “dropdown_2”. But that doesn’t matter because dropdowns isn’t used for anything anyway. If you want a list of elements whose ID starts with “dropdown” then:

const dropdowns = document.querySelectorAll('[id^=dropdown]')

will do.

Then there is:

const tableRows = document.querySelectorAll('#table td');

This selects td elements, not rows. So use:

const tableRows = document.querySelectorAll('#table tr');

But now:

this.getAttribute('value')

won’t work because this references the row, and the value attribute is on the cells. So get the value of the cells using the row’s cells collection.

e.g.

<select id="dropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select id="dropdown_2">
  <option value="value1">Value 1</option>
  <option value="value2">Value 2</option>
  <option value="value3">Value 3</option>
</select>

<table border="1" cellpadding="1" cellspacing="1" id="table">
  <tr>
    <th value="">Options</th>
    <th value="">Value</th>
  </tr>
  <tr>
    <td value="option1">Option1</td>
    <td value="value1">Value1</td>
  </tr>
  <tr>
    <td value="option2">Option2</td>
    <td value="value2">Value2</td>
  </tr>
  <tr>
    <td value="option3">Option3</td>
    <td value="value3">Value3</td>
  </tr>
</table>

<script>
  // Get references to the dropdown and table
  const dropdowns = document.querySelectorAll('[id^=dropdown]')
  const tableRows = document.querySelectorAll('#table tr');

  // Add a click event listener to each table row
  tableRows.forEach(row => {
    row.addEventListener('click', function() {

      // Get the cells associated with the clicked row
      let cells = this.cells;

      // Set the dropdown values to the selected values
      dropdown.value = cells[0].getAttribute('value');
      dropdown_2.value = cells[1].getAttribute('value');
    });
  });
</script>