将下拉菜单中的相关信息显示到表格数据单元格元素中。 （来自 SQL 数据库）

Question

所以，我可以使用数据库中的信息填充下拉列表，但是我需要做的是，当我单击下拉列表中的选项时，它应该在表格中显示所选选项（项目）的描述数据单元格元素。当用户选择一个选项时，它不想在表格数据中显示任何内容。

从下拉列表到文本框（不在表格内部）都可以正常工作。

HTML / PHP

          <table class="inventory">
           <thead>
              <th>
                 <span>
                    <h2>Service Date</h2>
                 </span>
              </th>
              <th>
                 <span>
                    <h2>Item</h2>
                 </span>
              </th>
              <th>
                 <span>
                    <h2>Description</h2>
                 </span>
              </th>
              <th>
                 <span>
                    <h2>Rate</h2>
                 </span>
              </th>
              <th>
                 <span>
                    <h2>Quantity</h2>
                 </span>
              </th>
              <th>
                 <span>
                    <h2>Subtotal</h2>
                 </span>
              </th>
           </thead>
           <tbody>
              <tr>
                 <!------ Service Date -------->
                 <td>
                    <a class="cut">-</a><span contenteditable></span>           
                 </td>
                 <!------ Item -------->
                 <td>
                    <span contenteditable>
                       <div class="productSelect">
                          <select name="pull_data" id="pull_data">
                             <option value="" disabled selected>Click to See Products</option>
                             <?php
                                $records = mysqli_query($conn, "SELECT * FROM products");
                                    while($data = mysqli_fetch_array($records))
                                                    {
                                  
                                 echo '<option value="'.$data['name'].'" data-description="' . $data['description'].'">' . $data['name'] . '</option>';
                                    }
                                ?>
                          </select>
                       </div>
                    </span>
                 </td>
                 <!------ Description -------->
                 <td>
                    <span id="details" name="details" contenteditable></span>
                 </td>

JavaScript

      <script>
     var mySelect = document.getElementById("pull_data");
     mySelect.addEventListener("change", function() {
     var myOptionFour = mySelect.options[mySelect.selectedIndex].getAttribute("data-description");
        document.getElementsById('details').value = myOptionFour;
     
     });
     
     </script>

Answer 1

您的问题有很多模糊不清的地方，您应该发布更详细的信息。但这里有一个您可能正在寻找的示例：

<table class="inventory">
    <thead>
        <th>
            <span>
                <h2>Service Date</h2>
            </span>
        </th>
        <th>
            <span>
                <h2>Item</h2>
            </span>
        </th>
        <th>
            <span>
                <h2>Description</h2>
            </span>
        </th>
        <th>
            <span>
                <h2>Rate</h2>
            </span>
        </th>
        <th>
            <span>
                <h2>Quantity</h2>
            </span>
        </th>
        <th>
            <span>
                <h2>Subtotal</h2>
            </span>
        </th>
    </thead>
    <tbody id="table_body">
        <tr>
            <!------ Service Date -------->
            <td>
                <a class="cut">-</a><span contenteditable></span>
            </td>
            <!------ Item -------->
            <td>
                <span contenteditable>
                    <div class="productSelect">
                        <select name="pull_data" id="pull_data">
                            <option value="" disabled selected>Click to See Products</option>
                            <?php

                                $datas = array(
                                    array(
                                        "name"=>"val1",
                                        "description"=>"dis is val1",
                                    ),
                                    array(
                                        "name"=>"val2",
                                        "description"=>"dis is val2",
                                    ),
                                    array(
                                        "name"=>"val3",
                                        "description"=>"dis is val3",
                                    ),
                                );

                                    foreach ($datas as $key => $data) {
                                        echo '<option value="'.$data['name'].'" data-description="' . $data['description'].'">' . $data['name'] . '</option>';
                                    }
                                ?>
                        </select>
                    </div>
                </span>
            </td>
            <!------ Description -------->
            <td data-name="details">
                <span contenteditable></span>
            </td>
</table>



<script>
    var mySelect = document.getElementById("pull_data");

    var t = mySelect.parentNode.parentNode.parentNode.parentNode.querySelectorAll(":scope > td[data-name='details']")[0].children[0];
    
    mySelect.addEventListener("change", function () {
        var myOption = mySelect.options[mySelect.selectedIndex].getAttribute("data-email"); // None existing
        //document.getElementById('mail').value = myOption; // None existing
        var myOptionTwo = mySelect.options[mySelect.selectedIndex].getAttribute("data-street"); // None existing
        //document.getElementById('street').value = myOptionTwo; // None existing
        var myOptionThree = mySelect.options[mySelect.selectedIndex].getAttribute("data-rate"); // None existing
        //document.getElementById('price').value = myOptionThree; // None existing
        var myOptionFour = mySelect.options[mySelect.selectedIndex].getAttribute("data-description");
        // document.('details')[2].value = myOptionFour;

        t.innerHTML = myOptionFour;

    });
</script>

---

现在，如果这不起作用，请至少用以下信息补充您的问题：整个代码（不缺少任何关闭 HTML 标记）、用于将信息导入表中的数据库信息、用简单的英语表达清楚的问题，清楚地描述您正在努力实现的目标，最后从与您提交的 HTML 无关的代码中清除您提交的 JS 代码。