Javascript - How to set the dropdown value by clicking on a table row

Problem:

I’m trying to find out a way to dynamically/remotely change the selected value of a dropdown-menu by clicking on a table row, preferably located on another html page.

Contents

Problem:Solution:

The code below shows an attempt to get it to work, but the value of the dropdown-menu gets blank when clicking on any table row.

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

<table border="1" cellpadding="1" cellspacing="1" id="table">
<tr><td>option1</td></tr>
<tr><td>option2</td></tr>
<tr><td>option3</td></tr> 
</table>

<script>
  // Get references to the dropdown and table
  const dropdown = document.getElementById('dropdown');
  const tableRows = document.querySelectorAll('#table');

  // 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('data-value');

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

All suggestions would be greatly appreciated.

Solution:

This is because:

1- You are assigning the event to the table, not the table-cell(td).

2- No data-value attribute is defined for the table-cells.

Hence the selectedValue is null.

        const dropdown = document.getElementById('dropdown');
        const tableCells = document.querySelectorAll('#table td');
// td is added to the css selector

        tableCells.forEach(cell => {
            cell.addEventListener('click', function () {
                const selectedValue = this.getAttribute('data-value');
                dropdown.value = selectedValue;
            });
        });

#table td {cursor: pointer;}  /* optional to show the table-cell is clickable */

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

    <table border="1" cellpadding="1" cellspacing="1" id="table">
        <tr><td data-value="option1">option1</td></tr>
        <tr><td data-value="option2">option2</td></tr>
        <tr><td data-value="option3">option3</td></tr>
    </table>

Expand snippet

Edit: Case when the dropdown is in another page

Assuming the dropdown resides in a separate page (77294082_B.html), we add a simple function to change the selected-value of dropdown so we can call it from the opener window (77294082_A.html).

77294082_B.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
        <title>77294082_B/how-to-set-the-dropdown-value-by-clicking-on-a-table-row</title>
    <script>
        function set_selectedValue(vlu) {
            document.getElementById("dropdown").value = vlu;
        }
    </script>
</head>
<body>
    <select id="dropdown">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
</body>
</html>

In the opener window where the table resides, we add an event listener to load event to automatically open page 77294082_B.html and then display the table. this is to ensure page B is loaded before user can click on table.
In page A, the set_selectedValue of page B is invoked when a cell is clicked.

77294082_A.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>77294082_A/how-to-set-the-dropdown-value-by-clicking-on-a-table-row</title>
    <style>
        #table td {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="1" cellspacing="1" id="table" style="visibility:hidden;">
        <tr><td data-value="option1">option1</td></tr>
        <tr><td data-value="option2">option2</td></tr>
        <tr><td data-value="option3">option3</td></tr>
    </table>
    <script>
        var windowB;
        var table = document.getElementById("table");
        window.addEventListener("load", function () {
            windowB = window.open("77294082_B.html");
            windowB.addEventListener("load", function () {
                table.style.visibility = "visible";
            });
        });

        const dropdown = document.getElementById("dropdown");
        const tableCells = document.querySelectorAll("#table td");

        tableCells.forEach(cell => {
            cell.addEventListener("click", function () {
                const selectedValue = this.getAttribute("data-value");
                windowB.set_selectedValue(selectedValue);
            });
        });
    </script>
</body>
</html>